refactor: 重构数据层支持 SGS SDK 集成

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/map/TencentMap.vue

@@ -8,6 +8,7 @@
       :scale="mapScale"
       :markers="markers"
       :polygons="polygons"
+      :polylines="displayPolylines"
       :show-location="!isH5"
       :enable-3D="false"
       :enable-overlooking="false"
@@ -59,6 +60,7 @@
 
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
+import { getMuseumEntranceLocation } from '@/services/tencent/TencentMapService'
 
 const isH5 = typeof window !== 'undefined'
 
@@ -94,6 +96,13 @@ interface Polygon {
   zIndex: number
 }
 
+interface Polyline {
+  points: Array<{ latitude: number; longitude: number }>
+  color: string
+  width: number
+  dottedLine?: boolean
+}
+
 interface MapFloor {
   id: string
   label: string
@@ -102,15 +111,18 @@ interface MapFloor {
 const props = withDefaults(defineProps<{
   activeFloor?: string
   floors?: MapFloor[]
+  polylines?: Polyline[]
 }>(), {
   activeFloor: '1F',
-  floors: () => [] as MapFloor[]
+  floors: () => [] as MapFloor[],
+  polylines: () => [] as Polyline[]
 })
 
 const emit = defineEmits<{
   markerClick: [markerId: number]
   floorChange: [floor: string]
   enter3DMode: []
+  mapTap: [location: { latitude: number; longitude: number }]
 }>()
 
 // 深圳自然博物馆实际坐标
@@ -157,36 +169,77 @@ const polygons = ref<Polygon[]>([
   }
 ])
 
-// 地图标记点（博物馆入口和主要位置）
-const markers = ref<Marker[]>([
-  {
-    id: 0,
-    latitude: 22.692763,
-    longitude: 114.363487,
-    iconPath: '/static/icons/marker-museum.svg',
+// 博物馆标记点（初始占位，API 获取后更新）
+const museumMarker = ref<Marker>({
+  id: 0,
+  latitude: 22.692763,
+  longitude: 114.363487,
+  iconPath: '/static/icons/marker-museum.svg',
+  width: 40,
+  height: 40,
+  title: '深圳自然博物馆',
+  callout: {
+    content: '深圳自然博物馆',
+    display: 'ALWAYS',
+    padding: 12,
+    borderRadius: 6,
+    bgColor: '#E0E100',
+    color: '#000000',
+    fontSize: 14
+  }
+})
+
+// 主入口标记点
+const entranceMarker = ref<Marker>({
+  id: 1,
+  latitude: 22.692363,
+  longitude: 114.363487,
+  iconPath: '/static/icons/marker-entrance.svg',
+  width: 30,
+  height: 30,
+  title: '主入口',
+  callout: {
+    content: '主入口',
+    display: 'BYCLICK',
+    padding: 10,
+    borderRadius: 5,
+    bgColor: '#000000',
+    color: '#FFFFFF',
+    fontSize: 12
+  }
+})
+
+// 地图标记点列表
+const markers = computed(() => [museumMarker.value, entranceMarker.value])
+
+// 显示的路线列表（转换格式以适配 uni-app map 组件）
+const displayPolylines = computed(() => {
+  return props.polylines.map((polyline, index) => ({
+    ...polyline,
+    id: index,
+    // 确保点格式正确
+    points: polyline.points.map((p) => ({
+      latitude: p.latitude,
+      longitude: p.longitude
+    }))
+  }))
+})
+
+/**
+ * 更新用户位置标记
+ */
+const updateUserLocation = (location: { latitude: number; longitude: number }) => {
+  const userMarkerIndex = markers.value.findIndex((m) => m.id === 999)
+  const userMarker: Marker = {
+    id: 999,
+    latitude: location.latitude,
+    longitude: location.longitude,
+    iconPath: '/static/icons/marker-user-location.svg',
     width: 40,
     height: 40,
-    title: '深圳自然博物馆',
+    title: '我的位置',
     callout: {
-      content: '深圳自然博物馆',
-      display: 'ALWAYS',
-      padding: 12,
-      borderRadius: 6,
-      bgColor: '#E0E100',
-      color: '#000000',
-      fontSize: 14
-    }
-  },
-  {
-    id: 1,
-    latitude: 22.692363,
-    longitude: 114.363487,
-    iconPath: '/static/icons/marker-entrance.svg',
-    width: 30,
-    height: 30,
-    title: '主入口',
-    callout: {
-      content: '主入口',
+      content: '您在这里',
       display: 'BYCLICK',
       padding: 10,
       borderRadius: 5,
@@ -194,8 +247,41 @@ const markers = ref<Marker[]>([
       color: '#FFFFFF',
       fontSize: 12
     }
-  },
-])
+  }
+
+  if (userMarkerIndex >= 0) {
+    markers.value[userMarkerIndex] = userMarker
+  } else {
+    markers.value.push(userMarker)
+  }
+}
+
+/**
+ * 清除用户位置标记
+ */
+const clearUserLocation = () => {
+  const userMarkerIndex = markers.value.findIndex((m) => m.id === 999)
+  if (userMarkerIndex >= 0) {
+    markers.value.splice(userMarkerIndex, 1)
+  }
+}
+
+/**
+ * 移动地图中心到指定位置
+ */
+const moveTo = (location: { latitude: number; longitude: number }) => {
+  mapCenter.value = {
+    latitude: location.latitude,
+    longitude: location.longitude
+  }
+}
+
+// 暴露方法给父组件
+defineExpose({
+  updateUserLocation,
+  clearUserLocation,
+  moveTo
+})
 
 // 处理标记点点击
 const handleMarkerTap = (e: any) => {
@@ -214,6 +300,10 @@ const handleRegionChange = (e: any) => {
 // 处理地图点击
 const handleMapTap = (e: any) => {
   console.log('点击地图:', e.detail)
+  const { latitude, longitude } = e.detail || {}
+  if (latitude !== undefined && longitude !== undefined) {
+    emit('mapTap', { latitude, longitude })
+  }
 }
 
 // 处理楼层点击
@@ -294,8 +384,20 @@ const handleEnter3D = () => {
   emit('enter3DMode')
 }
 
-onMounted(() => {
-  console.log('地图组件已挂载')
+onMounted(async () => {
+  console.log('地图组件已挂载，开始获取入口位置...')
+
+  // 从腾讯地图 API 获取入口位置
+  const entranceLocation = await getMuseumEntranceLocation()
+
+  if (entranceLocation) {
+    entranceMarker.value = {
+      ...entranceMarker.value,
+      latitude: entranceLocation.lat,
+      longitude: entranceLocation.lng
+    }
+    console.log('已更新入口位置:', entranceLocation)
+  }
 })
 </script>