@ebiz/designer-components 0.1.11 → 0.1.13

package/src/components/EbizMap.vue

@@ -1,542 +1,542 @@
-<template>
-  <div class="ebiz-map">
-    <div v-if="!apiKey && !manualInput" class="manual-input-tip">
-      <div class="tip-content">
-        <p>请输入高德地图API Key，或者</p>
-        <button class="switch-btn" @click="manualInput = true">手动输入经纬度</button>
-        <p class="tip-link">
-          <a href="https://lbs.amap.com/tools/picker" target="_blank" rel="noopener noreferrer">
-            前往高德地图坐标拾取器获取经纬度
-          </a>
-        </p>
-      </div>
-    </div>
-    
-    <div v-if="manualInput" class="manual-input-container">
-      <div class="input-group">
-        <label>经度：</label>
-        <input 
-          type="number" 
-          step="0.000001" 
-          v-model.number="longitude" 
-          @change="updateCoordinates"
-          placeholder="请输入经度"
-        />
-      </div>
-      <div class="input-group">
-        <label>纬度：</label>
-        <input 
-          type="number" 
-          step="0.000001" 
-          v-model.number="latitude" 
-          @change="updateCoordinates"
-          placeholder="请输入纬度"
-        />
-      </div>
-      <div class="input-actions">
-        <button class="switch-btn" @click="manualInput = false" v-if="apiKey">切换到地图模式</button>
-      </div>
-      <p class="tip-link">
-        <a href="https://lbs.amap.com/tools/picker" target="_blank" rel="noopener noreferrer">
-          前往高德地图坐标拾取器获取经纬度
-        </a>
-      </p>
-    </div>
-    
-    <div v-if="apiKey && !manualInput">
-      <!-- 搜索框 -->
-      <div class="search-container">
-        <!-- <div class="search-input-group">
-          <input 
-            type="text" 
-            v-model="searchKeyword" 
-            @keyup.enter="searchPlace"
-            placeholder="搜索位置" 
-            class="search-input"
-          />
-          <button class="search-btn" @click="searchPlace">搜索</button>
-        </div> -->
-        <!-- 搜索结果列表 -->
-        <!-- <div class="search-results" v-if="searchResults.length > 0">
-          <div 
-            v-for="(item, index) in searchResults" 
-            :key="index" 
-            class="search-result-item"
-            @click="selectSearchResult(item)"
-          >
-            <div class="result-name">{{ item.name }}</div>
-            <div class="result-address">{{ item.address }}</div>
-          </div>
-        </div> -->
-      </div>
-      
-      <div ref="mapContainer" class="map-container"></div>
-      <div v-if="showMarkerInfo && modelValue" class="marker-info">
-        经度: {{ modelValue[0] }}, 纬度: {{ modelValue[1] }}
-      </div>
-      <div class="map-actions">
-        <button class="switch-btn" @click="manualInput = true">切换到手动输入</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, watch, onBeforeUnmount, nextTick } from 'vue';
-
-const props = defineProps({
-  /**
-   * 地图中心点经纬度
-   */
-  center: {
-    type: Array,
-    default: () => [116.397428, 39.90923]
-  },
-  /**
-   * 地图缩放级别
-   */
-  zoom: {
-    type: Number,
-    default: 11
-  },
-  /**
-   * 地图类型
-   */
-  mapType: {
-    type: String,
-    default: 'amap',
-    validator: (value) => ['amap', 'bmap'].includes(value)
-  },
-  /**
-   * 地图高度
-   */
-  height: {
-    type: String,
-    default: '400px'
-  },
-  /**
-   * 是否显示标记点信息
-   */
-  showMarkerInfo: {
-    type: Boolean,
-    default: true
-  },
-  /**
-   * 地图 API Key
-   */
-  apiKey: {
-    type: String,
-    default: ''
-  },
-  /**
-   * 经纬度值
-   */
-  modelValue: {
-    type: Array,
-    default: null
-  }
-});
-
-const emit = defineEmits(['update:modelValue', 'markerClick', 'mapClick']);
-
-const mapContainer = ref(null);
-const manualInput = ref(!props.apiKey);
-const longitude = ref(props.modelValue ? props.modelValue[0] : props.center[0]);
-const latitude = ref(props.modelValue ? props.modelValue[1] : props.center[1]);
-const mapLoadError = ref(false);
-
-// 搜索相关
-const searchKeyword = ref('');
-const searchResults = ref([]);
-let placeSearch = null; // 高德地图搜索服务
-
-let map = null;
-let marker = null;
-let amapScript = null;
-
-// 更新坐标
-const updateCoordinates = () => {
-  if (longitude.value && latitude.value) {
-    emit('update:modelValue', [longitude.value, latitude.value]);
-  }
-};
-
-// 添加标记点
-const addMarker = (position) => {
-  if (marker) {
-    map.remove(marker);
-  }
-  marker = new window.AMap.Marker({
-    position: position,
-    draggable: true
-  });
-  map.add(marker);
-  
-  // 拖拽结束后更新坐标
-  marker.on('dragend', () => {
-    const position = marker.getPosition();
-    const lnglat = [position.getLng(), position.getLat()];
-    emit('update:modelValue', lnglat);
-    longitude.value = lnglat[0];
-    latitude.value = lnglat[1];
-  });
-  
-  // 点击标记点事件
-  marker.on('click', () => {
-    emit('markerClick', position);
-  });
-};
-
-// 搜索位置
-const searchPlace = () => {
-  if (!searchKeyword.value || !placeSearch) return;
-  
-  placeSearch.search(searchKeyword.value, (status, result) => {
-    if (status === 'complete' && result.info === 'OK') {
-      const pois = result.poiList?.pois || [];
-      searchResults.value = pois.map(poi => ({
-        name: poi.name,
-        address: poi.address,
-        location: [poi.location.lng, poi.location.lat]
-      }));
-    } else {
-      searchResults.value = [];
-    }
-  });
-};
-
-// 选择搜索结果
-const selectSearchResult = (item) => {
-  if (item.location && item.location.length === 2) {
-    const lnglat = item.location;
-    emit('update:modelValue', lnglat);
-    emit('mapClick', lnglat);
-    addMarker(lnglat);
-    map.setCenter(lnglat);
-    searchResults.value = []; // 清空搜索结果
-    searchKeyword.value = item.name; // 更新搜索框内容为选中的地点名称
-    
-    // 同步更新手动输入值
-    longitude.value = lnglat[0];
-    latitude.value = lnglat[1];
-  }
-};
-
-// 监听modelValue更新经纬度输入框
-watch(() => props.modelValue, (newVal) => {
-  if (newVal) {
-    longitude.value = newVal[0];
-    latitude.value = newVal[1];
-  }
-}, { deep: true });
-
-// 加载高德地图脚本
-const loadAMapScript = () => {
-  return new Promise((resolve, reject) => {
-    if (window.AMap) {
-      resolve(window.AMap);
-      return;
-    }
-
-    const script = document.createElement('script');
-    script.type = 'text/javascript';
-    script.async = true;
-    script.src = `https://webapi.amap.com/maps?v=2.0&key=${props.apiKey}&plugin=AMap.PlaceSearch`;
-    script.onerror = reject;
-    script.onload = () => {
-      resolve(window.AMap);
-    };
-    document.head.appendChild(script);
-    amapScript = script;
-  });
-};
-
-// 清理地图实例
-const cleanupMap = () => {
-  if (map) {
-    map.destroy();
-    map = null;
-  }
-};
-
-// 初始化高德地图
-const initAMap = async () => {
-  if (!props.apiKey || !mapContainer.value) return;
-  
-  try {
-    cleanupMap(); // 清理之前的地图实例
-    mapLoadError.value = false;
-    
-    await loadAMapScript();
-    
-    // 初始化地图
-    map = new window.AMap.Map(mapContainer.value, {
-      zoom: props.zoom,
-      center: props.modelValue || props.center,
-      resizeEnable: true, // 允许缩放
-      viewMode: '2D' // 设置为2D模式，提高性能
-    });
-
-    // 添加标记点
-    if (props.modelValue) {
-      addMarker(props.modelValue);
-    }
-
-    // 点击地图事件
-    map.on('click', (e) => {
-      const lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
-      emit('update:modelValue', lnglat);
-      emit('mapClick', lnglat);
-      addMarker(lnglat);
-      
-      // 同步更新手动输入值
-      longitude.value = lnglat[0];
-      latitude.value = lnglat[1];
-    });
-
-    // 添加高德地图内置搜索控件
-    if (props.enableSearch) {
-      // 使用nextTick确保DOM已更新
-      nextTick(() => {
-        initSearchControl();
-      });
-    }
-  } catch (error) {
-    // 出错时设置错误状态并切换到手动输入模式
-    mapLoadError.value = true;
-    manualInput.value = true;
-  }
-};
-
-// 监听 center 变化
-watch(() => props.center, (newVal) => {
-  if (map && newVal) {
-    map.setCenter(newVal);
-  }
-}, { deep: true });
-
-// 监听 zoom 变化
-watch(() => props.zoom, (newVal) => {
-  if (map) {
-    map.setZoom(newVal);
-  }
-});
-
-// 监听 manualInput 变化，切换模式后重新初始化地图
-watch(manualInput, (newVal) => {
-  if (!newVal && props.apiKey) {
-    // 切回地图模式
-    setTimeout(() => {
-      initAMap();
-    }, 0);
-  }
-});
-
-// 监听 apiKey 变化，有Key后可以使用地图
-watch(() => props.apiKey, (newVal) => {
-  if (newVal && !manualInput.value) {
-    setTimeout(() => {
-      initAMap();
-    }, 0);
-  }
-});
-
-onMounted(() => {
-  if (props.apiKey && !manualInput.value && props.mapType === 'amap') {
-    initAMap();
-  }
-  
-  // 如果有初始值，更新输入框
-  if (props.modelValue) {
-    longitude.value = props.modelValue[0];
-    latitude.value = props.modelValue[1];
-  }
-});
-
-onBeforeUnmount(() => {
-  if (map) {
-    map.destroy();
-  }
-  
-  // 清理脚本
-  if (amapScript && amapScript.parentNode) {
-    amapScript.parentNode.removeChild(amapScript);
-  }
-});
-</script>
-
-<style scoped>
-.ebiz-map {
-  position: relative;
-  width: 100%;
-  min-height: 150px;
-}
-
-.map-container {
-  width: 100%;
-  height: v-bind(height);
-}
-
-.marker-info {
-  position: absolute;
-  bottom: 10px;
-  left: 10px;
-  background-color: rgba(255, 255, 255, 0.8);
-  padding: 5px 10px;
-  border-radius: 4px;
-  font-size: 12px;
-  z-index: 10;
-}
-
-.manual-input-tip {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 200px;
-  background-color: #f5f5f5;
-  border: 1px dashed #ccc;
-  border-radius: 4px;
-}
-
-.tip-content {
-  text-align: center;
-}
-
-.manual-input-container {
-  padding: 20px;
-  background-color: #f9f9f9;
-  border: 1px solid #eee;
-  border-radius: 4px;
-}
-
-.input-group {
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
-}
-
-.input-group label {
-  width: 60px;
-  margin-right: 10px;
-}
-
-.input-group input {
-  flex: 1;
-  padding: 8px 12px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.input-actions {
-  margin-bottom: 15px;
-}
-
-.switch-btn {
-  padding: 6px 12px;
-  background-color: #1890ff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  margin-top: 10px;
-}
-
-.switch-btn:hover {
-  background-color: #40a9ff;
-}
-
-.map-actions {
-  margin-top: 10px;
-}
-
-.tip-link {
-  margin-top: 10px;
-  font-size: 13px;
-}
-
-.tip-link a {
-  color: #1890ff;
-  text-decoration: none;
-}
-
-.tip-link a:hover {
-  text-decoration: underline;
-}
-
-/* 搜索框样式 */
-.search-container {
-  position: relative;
-  margin-bottom: 10px;
-  z-index: 20;
-}
-
-.search-input-group {
-  display: flex;
-  align-items: center;
-}
-
-.search-input {
-  flex: 1;
-  padding: 8px 12px;
-  border: 1px solid #ddd;
-  border-radius: 4px 0 0 4px;
-  font-size: 14px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-}
-
-.search-btn {
-  padding: 8px 12px;
-  background-color: #1890ff;
-  color: white;
-  border: none;
-  border-radius: 0 4px 4px 0;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.search-btn:hover {
-  background-color: #40a9ff;
-}
-
-/* 搜索结果列表 */
-.search-results {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background-color: white;
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  max-height: 300px;
-  overflow-y: auto;
-  z-index: 30;
-}
-
-.search-result-item {
-  padding: 10px 15px;
-  border-bottom: 1px solid #f0f0f0;
-  cursor: pointer;
-}
-
-.search-result-item:last-child {
-  border-bottom: none;
-}
-
-.search-result-item:hover {
-  background-color: #f5f5f5;
-}
-
-.result-name {
-  font-weight: bold;
-  margin-bottom: 3px;
-}
-
-.result-address {
-  font-size: 12px;
-  color: #666;
-}
+<template>
+  <div class="ebiz-map">
+    <div v-if="!apiKey && !manualInput" class="manual-input-tip">
+      <div class="tip-content">
+        <p>请输入高德地图API Key，或者</p>
+        <button class="switch-btn" @click="manualInput = true">手动输入经纬度</button>
+        <p class="tip-link">
+          <a href="https://lbs.amap.com/tools/picker" target="_blank" rel="noopener noreferrer">
+            前往高德地图坐标拾取器获取经纬度
+          </a>
+        </p>
+      </div>
+    </div>
+    
+    <div v-if="manualInput" class="manual-input-container">
+      <div class="input-group">
+        <label>经度：</label>
+        <input 
+          type="number" 
+          step="0.000001" 
+          v-model.number="longitude" 
+          @change="updateCoordinates"
+          placeholder="请输入经度"
+        />
+      </div>
+      <div class="input-group">
+        <label>纬度：</label>
+        <input 
+          type="number" 
+          step="0.000001" 
+          v-model.number="latitude" 
+          @change="updateCoordinates"
+          placeholder="请输入纬度"
+        />
+      </div>
+      <div class="input-actions">
+        <button class="switch-btn" @click="manualInput = false" v-if="apiKey">切换到地图模式</button>
+      </div>
+      <p class="tip-link">
+        <a href="https://lbs.amap.com/tools/picker" target="_blank" rel="noopener noreferrer">
+          前往高德地图坐标拾取器获取经纬度
+        </a>
+      </p>
+    </div>
+    
+    <div v-if="apiKey && !manualInput">
+      <!-- 搜索框 -->
+      <div class="search-container">
+        <!-- <div class="search-input-group">
+          <input 
+            type="text" 
+            v-model="searchKeyword" 
+            @keyup.enter="searchPlace"
+            placeholder="搜索位置" 
+            class="search-input"
+          />
+          <button class="search-btn" @click="searchPlace">搜索</button>
+        </div> -->
+        <!-- 搜索结果列表 -->
+        <!-- <div class="search-results" v-if="searchResults.length > 0">
+          <div 
+            v-for="(item, index) in searchResults" 
+            :key="index" 
+            class="search-result-item"
+            @click="selectSearchResult(item)"
+          >
+            <div class="result-name">{{ item.name }}</div>
+            <div class="result-address">{{ item.address }}</div>
+          </div>
+        </div> -->
+      </div>
+      
+      <div ref="mapContainer" class="map-container"></div>
+      <div v-if="showMarkerInfo && modelValue" class="marker-info">
+        经度: {{ modelValue[0] }}, 纬度: {{ modelValue[1] }}
+      </div>
+      <div class="map-actions">
+        <button class="switch-btn" @click="manualInput = true">切换到手动输入</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, onBeforeUnmount, nextTick } from 'vue';
+
+const props = defineProps({
+  /**
+   * 地图中心点经纬度
+   */
+  center: {
+    type: Array,
+    default: () => [116.397428, 39.90923]
+  },
+  /**
+   * 地图缩放级别
+   */
+  zoom: {
+    type: Number,
+    default: 11
+  },
+  /**
+   * 地图类型
+   */
+  mapType: {
+    type: String,
+    default: 'amap',
+    validator: (value) => ['amap', 'bmap'].includes(value)
+  },
+  /**
+   * 地图高度
+   */
+  height: {
+    type: String,
+    default: '400px'
+  },
+  /**
+   * 是否显示标记点信息
+   */
+  showMarkerInfo: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 地图 API Key
+   */
+  apiKey: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 经纬度值
+   */
+  modelValue: {
+    type: Array,
+    default: null
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'markerClick', 'mapClick']);
+
+const mapContainer = ref(null);
+const manualInput = ref(!props.apiKey);
+const longitude = ref(props.modelValue ? props.modelValue[0] : props.center[0]);
+const latitude = ref(props.modelValue ? props.modelValue[1] : props.center[1]);
+const mapLoadError = ref(false);
+
+// 搜索相关
+const searchKeyword = ref('');
+const searchResults = ref([]);
+let placeSearch = null; // 高德地图搜索服务
+
+let map = null;
+let marker = null;
+let amapScript = null;
+
+// 更新坐标
+const updateCoordinates = () => {
+  if (longitude.value && latitude.value) {
+    emit('update:modelValue', [longitude.value, latitude.value]);
+  }
+};
+
+// 添加标记点
+const addMarker = (position) => {
+  if (marker) {
+    map.remove(marker);
+  }
+  marker = new window.AMap.Marker({
+    position: position,
+    draggable: true
+  });
+  map.add(marker);
+  
+  // 拖拽结束后更新坐标
+  marker.on('dragend', () => {
+    const position = marker.getPosition();
+    const lnglat = [position.getLng(), position.getLat()];
+    emit('update:modelValue', lnglat);
+    longitude.value = lnglat[0];
+    latitude.value = lnglat[1];
+  });
+  
+  // 点击标记点事件
+  marker.on('click', () => {
+    emit('markerClick', position);
+  });
+};
+
+// 搜索位置
+const searchPlace = () => {
+  if (!searchKeyword.value || !placeSearch) return;
+  
+  placeSearch.search(searchKeyword.value, (status, result) => {
+    if (status === 'complete' && result.info === 'OK') {
+      const pois = result.poiList?.pois || [];
+      searchResults.value = pois.map(poi => ({
+        name: poi.name,
+        address: poi.address,
+        location: [poi.location.lng, poi.location.lat]
+      }));
+    } else {
+      searchResults.value = [];
+    }
+  });
+};
+
+// 选择搜索结果
+const selectSearchResult = (item) => {
+  if (item.location && item.location.length === 2) {
+    const lnglat = item.location;
+    emit('update:modelValue', lnglat);
+    emit('mapClick', lnglat);
+    addMarker(lnglat);
+    map.setCenter(lnglat);
+    searchResults.value = []; // 清空搜索结果
+    searchKeyword.value = item.name; // 更新搜索框内容为选中的地点名称
+    
+    // 同步更新手动输入值
+    longitude.value = lnglat[0];
+    latitude.value = lnglat[1];
+  }
+};
+
+// 监听modelValue更新经纬度输入框
+watch(() => props.modelValue, (newVal) => {
+  if (newVal) {
+    longitude.value = newVal[0];
+    latitude.value = newVal[1];
+  }
+}, { deep: true });
+
+// 加载高德地图脚本
+const loadAMapScript = () => {
+  return new Promise((resolve, reject) => {
+    if (window.AMap) {
+      resolve(window.AMap);
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.async = true;
+    script.src = `https://webapi.amap.com/maps?v=2.0&key=${props.apiKey}&plugin=AMap.PlaceSearch`;
+    script.onerror = reject;
+    script.onload = () => {
+      resolve(window.AMap);
+    };
+    document.head.appendChild(script);
+    amapScript = script;
+  });
+};
+
+// 清理地图实例
+const cleanupMap = () => {
+  if (map) {
+    map.destroy();
+    map = null;
+  }
+};
+
+// 初始化高德地图
+const initAMap = async () => {
+  if (!props.apiKey || !mapContainer.value) return;
+  
+  try {
+    cleanupMap(); // 清理之前的地图实例
+    mapLoadError.value = false;
+    
+    await loadAMapScript();
+    
+    // 初始化地图
+    map = new window.AMap.Map(mapContainer.value, {
+      zoom: props.zoom,
+      center: props.modelValue || props.center,
+      resizeEnable: true, // 允许缩放
+      viewMode: '2D' // 设置为2D模式，提高性能
+    });
+
+    // 添加标记点
+    if (props.modelValue) {
+      addMarker(props.modelValue);
+    }
+
+    // 点击地图事件
+    map.on('click', (e) => {
+      const lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
+      emit('update:modelValue', lnglat);
+      emit('mapClick', lnglat);
+      addMarker(lnglat);
+      
+      // 同步更新手动输入值
+      longitude.value = lnglat[0];
+      latitude.value = lnglat[1];
+    });
+
+    // 添加高德地图内置搜索控件
+    if (props.enableSearch) {
+      // 使用nextTick确保DOM已更新
+      nextTick(() => {
+        initSearchControl();
+      });
+    }
+  } catch (error) {
+    // 出错时设置错误状态并切换到手动输入模式
+    mapLoadError.value = true;
+    manualInput.value = true;
+  }
+};
+
+// 监听 center 变化
+watch(() => props.center, (newVal) => {
+  if (map && newVal) {
+    map.setCenter(newVal);
+  }
+}, { deep: true });
+
+// 监听 zoom 变化
+watch(() => props.zoom, (newVal) => {
+  if (map) {
+    map.setZoom(newVal);
+  }
+});
+
+// 监听 manualInput 变化，切换模式后重新初始化地图
+watch(manualInput, (newVal) => {
+  if (!newVal && props.apiKey) {
+    // 切回地图模式
+    setTimeout(() => {
+      initAMap();
+    }, 0);
+  }
+});
+
+// 监听 apiKey 变化，有Key后可以使用地图
+watch(() => props.apiKey, (newVal) => {
+  if (newVal && !manualInput.value) {
+    setTimeout(() => {
+      initAMap();
+    }, 0);
+  }
+});
+
+onMounted(() => {
+  if (props.apiKey && !manualInput.value && props.mapType === 'amap') {
+    initAMap();
+  }
+  
+  // 如果有初始值，更新输入框
+  if (props.modelValue) {
+    longitude.value = props.modelValue[0];
+    latitude.value = props.modelValue[1];
+  }
+});
+
+onBeforeUnmount(() => {
+  if (map) {
+    map.destroy();
+  }
+  
+  // 清理脚本
+  if (amapScript && amapScript.parentNode) {
+    amapScript.parentNode.removeChild(amapScript);
+  }
+});
+</script>
+
+<style scoped>
+.ebiz-map {
+  position: relative;
+  width: 100%;
+  min-height: 150px;
+}
+
+.map-container {
+  width: 100%;
+  height: v-bind(height);
+}
+
+.marker-info {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  z-index: 10;
+}
+
+.manual-input-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 200px;
+  background-color: #f5f5f5;
+  border: 1px dashed #ccc;
+  border-radius: 4px;
+}
+
+.tip-content {
+  text-align: center;
+}
+
+.manual-input-container {
+  padding: 20px;
+  background-color: #f9f9f9;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+.input-group {
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+}
+
+.input-group label {
+  width: 60px;
+  margin-right: 10px;
+}
+
+.input-group input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.input-actions {
+  margin-bottom: 15px;
+}
+
+.switch-btn {
+  padding: 6px 12px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  margin-top: 10px;
+}
+
+.switch-btn:hover {
+  background-color: #40a9ff;
+}
+
+.map-actions {
+  margin-top: 10px;
+}
+
+.tip-link {
+  margin-top: 10px;
+  font-size: 13px;
+}
+
+.tip-link a {
+  color: #1890ff;
+  text-decoration: none;
+}
+
+.tip-link a:hover {
+  text-decoration: underline;
+}
+
+/* 搜索框样式 */
+.search-container {
+  position: relative;
+  margin-bottom: 10px;
+  z-index: 20;
+}
+
+.search-input-group {
+  display: flex;
+  align-items: center;
+}
+
+.search-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px 0 0 4px;
+  font-size: 14px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.search-btn {
+  padding: 8px 12px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 0 4px 4px 0;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.search-btn:hover {
+  background-color: #40a9ff;
+}
+
+/* 搜索结果列表 */
+.search-results {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background-color: white;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 30;
+}
+
+.search-result-item {
+  padding: 10px 15px;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+}
+
+.search-result-item:last-child {
+  border-bottom: none;
+}
+
+.search-result-item:hover {
+  background-color: #f5f5f5;
+}
+
+.result-name {
+  font-weight: bold;
+  margin-bottom: 3px;
+}
+
+.result-address {
+  font-size: 12px;
+  color: #666;
+}
 </style>