地图初步

src/components/MapSelector.vue

@@ -13,13 +13,7 @@
         style="width: 100%; height: 400px; border: 1px solid #ccc; position: relative; z-index: 1"
         v-loading="mapLoading || isGettingLocation"
         :element-loading-text="isGettingLocation ? '正在获取当前位置...' : '正在加载地图...'"
-      >
-        <!-- 自定义标记 -->
-        <div v-if="markerPosition && map" class="custom-marker" :style="markerPosition">
-          <div class="marker-pin"></div>
-          <div class="marker-shadow"></div>
-        </div>
-      </div>
+      ></div>
 
       <!-- 错误提示 -->
       <div v-if="mapError" class="error-info">
@@ -30,13 +24,7 @@
       <div v-else class="coordinate-info">
         <p>当前选择坐标：经度 {{ selectedLng || '未选择' }}, 纬度 {{ selectedLat || '未选择' }}</p>
         <p class="tip">点击地图选择坐标位置</p>
-        <p
-          v-if="selectedLng && selectedLat && !props.longitude && !props.latitude"
-          class="current-location-info"
-        >
-          📍 已自动定位到当前位置
-        </p>
-        <p v-else-if="selectedLng && selectedLat" class="selected-info">✅ 已选择坐标点</p>
+        <!-- <p v-if="selectedLng && selectedLat" class="selected-info">✅ 已选择坐标点</p> -->
       </div>
 
       <!-- 使用原生按钮 -->
@@ -47,7 +35,7 @@
           @click="getCurrentLocationManually"
           :disabled="isGettingLocation"
         >
-          {{ isGettingLocation ? '定位中...' : '📍 获取当前位置' }}
+          {{ isGettingLocation ? '定位中...' : '📍 移至当前位置' }}
         </button>
         <button type="button" class="cancel-btn" @click="handleClose">取消</button>
         <button
@@ -98,6 +86,7 @@ const isGettingLocation = ref(false)
 
 let map = null
 let isMapInitialized = false
+let markerLayer = null
 
 // 获取当前位置
 const getCurrentLocation = () => {
@@ -138,7 +127,7 @@ const getCurrentLocation = () => {
         enableHighAccuracy: true,
         timeout: 10000,
         maximumAge: 60000,
-      }
+      },
     )
   }).finally(() => {
     isGettingLocation.value = false
@@ -167,29 +156,20 @@ const loadTencentMapAPI = () => {
   })
 }
 
-// 将经纬度转换为屏幕坐标
-const latLngToPixel = (lat, lng) => {
-  if (!map) return null
-
-  try {
-    const point = map.projectToContainer(new window.TMap.LatLng(lat, lng))
-    return {
-      left: point.getX() + 'px',
-      top: point.getY() + 'px',
-    }
-  } catch (error) {
-    console.error('坐标转换失败:', error)
-    return null
-  }
-}
-
 // 更新标记位置
 const updateMarkerPosition = () => {
   if (selectedLng.value && selectedLat.value && map) {
-    const position = latLngToPixel(selectedLat.value, selectedLng.value)
-    markerPosition.value = position
-  } else {
-    markerPosition.value = null
+    markerLayer.setGeometries([
+      {
+        id: '1', //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
+        styleId: 'myStyle', //指定样式id
+        position: new TMap.LatLng(selectedLat.value, selectedLng.value), //点标记坐标位置
+        properties: {
+          //自定义属性
+          title: 'marker1',
+        },
+      },
+    ])
   }
 }
 
@@ -218,11 +198,11 @@ const initMap = async () => {
         selectedLat.value = currentLocation.latitude
         selectedLng.value = currentLocation.longitude
 
-        ElMessage.success('已获取到当前位置')
+        // ElMessage.success('已获取到当前位置')
         console.log('使用当前位置作为地图中心:', { centerLat, centerLng })
       } catch (locationError) {
         console.warn('获取当前位置失败，使用默认位置:', locationError.message)
-        ElMessage.warning('获取当前位置失败，使用默认位置')
+        // ElMessage.warning('获取当前位置失败，使用默认位置')
       }
     }
 
@@ -232,6 +212,33 @@ const initMap = async () => {
       zoom: MAP_CONFIG.DEFAULT_ZOOM,
     })
 
+    markerLayer = new TMap.MultiMarker({
+      map: map, //指定地图容器
+      //样式定义
+      styles: {
+        //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
+        myStyle: new TMap.MarkerStyle({
+          width: 25, // 点标记样式宽度（像素）
+          height: 35, // 点标记样式高度（像素）
+          // src: '@/assets/images/map_icon.png', //图片路径
+          //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
+          anchor: { x: 16, y: 32 },
+        }),
+      },
+      //点标记数据数组
+      geometries: [
+        {
+          id: '1', //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
+          styleId: 'myStyle', //指定样式id
+          position: new TMap.LatLng(centerLat, centerLng), //点标记坐标位置
+          properties: {
+            //自定义属性
+            title: 'marker1',
+          },
+        },
+      ],
+    })
+
     // 添加点击事件
     map.on('click', (event) => {
       const lat = event.latLng.getLat()
@@ -246,10 +253,10 @@ const initMap = async () => {
       updateMarkerPosition()
 
       // 移动地图中心到点击位置
-      map.setCenter(new window.TMap.LatLng(lat, lng))
+      // map.setCenter(new window.TMap.LatLng(lat, lng))
 
       // 显示成功提示
-      ElMessage.success(`已选择坐标: ${lng.toFixed(6)}, ${lat.toFixed(6)}`)
+      // ElMessage.success(`已选择坐标: ${lng.toFixed(6)}, ${lat.toFixed(6)}`)
     })
 
     // 监听地图移动事件，更新标记位置
@@ -278,7 +285,7 @@ const updateMapCenter = () => {
   if (map && (props.longitude || props.latitude)) {
     const center = new window.TMap.LatLng(
       props.latitude || MAP_CONFIG.DEFAULT_CENTER.latitude,
-      props.longitude || MAP_CONFIG.DEFAULT_CENTER.longitude
+      props.longitude || MAP_CONFIG.DEFAULT_CENTER.longitude,
     )
     map.setCenter(center)
 
@@ -294,8 +301,8 @@ const getCurrentLocationManually = async () => {
   try {
     const currentLocation = await getCurrentLocation()
 
-    selectedLat.value = currentLocation.latitude
-    selectedLng.value = currentLocation.longitude
+    // selectedLat.value = currentLocation.latitude
+    // selectedLng.value = currentLocation.longitude
 
     // 更新地图中心和标记
     if (map) {
@@ -306,7 +313,7 @@ const getCurrentLocationManually = async () => {
       })
     }
 
-    ElMessage.success('已获取到当前位置')
+    // ElMessage.success('已移动到当前位置')
   } catch (error) {
     console.error('手动获取位置失败:', error)
     ElMessage.error('获取当前位置失败: ' + error.message)
@@ -329,7 +336,7 @@ const confirmSelection = () => {
       latitude: selectedLat.value,
     })
 
-    ElMessage.success('坐标确认成功！')
+    // ElMessage.success('坐标确认成功！')
     handleClose()
   } else {
     console.log('坐标未选择，无法确认')
@@ -351,7 +358,7 @@ const handleOpened = () => {
 
 // 关闭对话框
 const handleClose = () => {
-  console.log('关闭对话框')
+  // console.log('关闭对话框')
   markerPosition.value = null
   visible.value = false
 }
@@ -360,7 +367,7 @@ const handleClose = () => {
 watch([() => props.longitude, () => props.latitude], ([newLng, newLat]) => {
   selectedLng.value = newLng
   selectedLat.value = newLat
-  updateMapCenter()
+  // updateMapCenter()
 })
 
 // 组件卸载时清理
@@ -519,4 +526,4 @@ onUnmounted(() => {
     }
   }
 }
-</style>
+</style>

src/views/BusinessManage/HandleDialog.vue

@@ -65,8 +65,6 @@ const handleCoordinateConfirm = (coordinates) => {
   console.log('接收到坐标确认事件:', coordinates)
   formField.value.longitude = coordinates.longitude
   formField.value.latitude = coordinates.latitude
-  console.log('表单字段已更新:', formField.value)
-  ElMessage.success(`坐标选择成功: 经度 ${coordinates.longitude}, 纬度 ${coordinates.latitude}`)
 }
 </script>