1

2026-07-30 15:50:31 +08:00
parent d464721a1c
commit 1b8fd95fb2
7 changed files with 105 additions and 77 deletions
@@ -4,8 +4,8 @@
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Pointly-Tel - 高德POI商户查询</title>
-  <script type="module" crossorigin src="/assets/index-BhzmOGfg.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-B11j1Ee9.css">
+  <script type="module" crossorigin src="/assets/index-Pf7o_o9I.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-ChpioidU.css">
 </head>
 <body>
  <div id="app"></div>
@@ -115,7 +115,7 @@ import PoiMap from './components/PoiMap.vue'
 const mapRef = ref(null)
 const keywords = ref('')
 const city = ref('')
-const radius = ref(3000)
+const radius = ref(1000)
 const centerLat = ref(0)
 const centerLng = ref(0)
 const results = ref([])
@@ -175,6 +175,10 @@ const regions = {

 const cities = computed(() => regions[province.value] || [])

+const radiusOptions = [
+  { value: 1000, label: '1km' },
+]
+
 // 城市中心坐标（用于选中城市时地图跳转）
 const cityCoords = {
  '北京': [39.9042, 116.4074], '天津': [39.1252, 117.1908], '上海': [31.2304, 121.4737], '重庆': [29.4316, 106.9123],
@@ -277,15 +281,6 @@ const cityCoords = {
  '五指山': [18.7750, 109.5170],
 }

-const radiusOptions = [
-  { value: 1000, label: '1km' },
-  { value: 3000, label: '3km' },
-  { value: 5000, label: '5km' },
-  { value: 10000, label: '10km' },
-  { value: 20000, label: '20km' },
-  { value: 50000, label: '50km' },
-]
-
 // 选中城市时地图跳转
 watch(city, (val, oldVal) => {
  if (!val || val === oldVal || !mapRef.value) return
@@ -297,13 +292,6 @@ watch(city, (val, oldVal) => {
  mapRef.value.flyTo(coord[0], coord[1])
 })

-// 范围变更时只重绘圆圈大小，不改变地图视角
-watch(radius, (val) => {
-  if (centerLng.value && centerLat.value && mapRef.value) {
-    mapRef.value.updateRadiusCircle(val)
-  }
-})
-
 async function fetchSuggestions(kw) {
  if (!kw.trim()) {
    suggestions.value = []
@@ -11,6 +11,8 @@ const mapContainer = ref(null)
 let map = null
 let markerLayer = null
 let currentMarkers = []
+let markerByPoiId = {}
+let activeMarker = null
 let radiusCircle = null

 const emit = defineEmits(['marker-click', 'map-click'])
@@ -19,6 +21,30 @@ const emit = defineEmits(['marker-click', 'map-click'])
 const amapTileUrl = 'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
 const amapSubdomains = ['1', '2', '3', '4']

+// 蓝色默认图标
+const blueIcon = L.divIcon({
+  className: '',
+  html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 42" width="32" height="42">
+    <path d="M16 2C8.268 2 2 8.268 2 16c0 9.678 14 24 14 24s14-14.322 14-24C30 8.268 23.732 2 16 2z" fill="#1a73e8" stroke="#fff" stroke-width="2"/>
+    <circle cx="16" cy="15" r="6" fill="#fff"/>
+  </svg>`,
+  iconSize: [32, 42],
+  iconAnchor: [16, 42],
+  popupAnchor: [0, -42],
+})
+
+// 红色选中图标
+const redIcon = L.divIcon({
+  className: '',
+  html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 42" width="32" height="42">
+    <path d="M16 2C8.268 2 2 8.268 2 16c0 9.678 14 24 14 24s14-14.322 14-24C30 8.268 23.732 2 16 2z" fill="#e53935" stroke="#fff" stroke-width="2"/>
+    <circle cx="16" cy="15" r="6" fill="#fff"/>
+  </svg>`,
+  iconSize: [32, 42],
+  iconAnchor: [16, 42],
+  popupAnchor: [0, -42],
+})
+
 onMounted(() => {
  map = L.map(mapContainer.value, {
    center: [39.9042, 116.4074], // 北京
@@ -51,29 +77,20 @@ onUnmounted(() => {
 function clearMarkers() {
  markerLayer.clearLayers()
  currentMarkers = []
+  markerByPoiId = {}
+  activeMarker = null
 }

 function addMarkers(pois) {
  clearMarkers()
  if (!map || !pois.length) return

-  const pinIcon = L.divIcon({
-    className: '',
-    html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 42" width="32" height="42">
-      <path d="M16 2C8.268 2 2 8.268 2 16c0 9.678 14 24 14 24s14-14.322 14-24C30 8.268 23.732 2 16 2z" fill="#1a73e8" stroke="#fff" stroke-width="2"/>
-      <circle cx="16" cy="15" r="6" fill="#fff"/>
-    </svg>`,
-    iconSize: [32, 42],
-    iconAnchor: [16, 42],
-    popupAnchor: [0, -42],
-  })
-
  pois.forEach((poi) => {
    const lat = parseFloat(poi.latitude)
    const lng = parseFloat(poi.longitude)
    if (isNaN(lat) || isNaN(lng)) return

-    const marker = L.marker([lat, lng], { icon: pinIcon }).addTo(markerLayer)
+    const marker = L.marker([lat, lng], { icon: blueIcon }).addTo(markerLayer)
    marker.bindPopup(`
      <div class="map-popup">
        <h4>${poi.name}</h4>
@@ -84,12 +101,24 @@ function addMarkers(pois) {
    `)

    marker.on('click', () => {
+      setActiveMarker(marker)
      emit('marker-click', poi)
    })

    currentMarkers.push(marker)
+    if (poi.poiId) {
+      markerByPoiId[poi.poiId] = marker
+    }
  })
+}

+function setActiveMarker(marker) {
+  // 恢复上一个选中标记为蓝色
+  if (activeMarker && activeMarker !== marker) {
+    activeMarker.setIcon(blueIcon)
+  }
+  marker.setIcon(redIcon)
+  activeMarker = marker
 }

 function focusMarker(poi) {
@@ -100,14 +129,22 @@ function focusMarker(poi) {
  // 先飞到该位置
  flyTo(lat, lng, 15)

-  // 找到对应标记并弹窗
-  for (const marker of currentMarkers) {
-    const pos = marker.getLatLng()
-    if (Math.abs(pos.lat - lat) < 0.001 && Math.abs(pos.lng - lng) < 0.001) {
-      marker.openPopup()
-      break
+  // 按 poiId 查找
+  let marker = poi.poiId ? markerByPoiId[poi.poiId] : null
+  if (!marker) {
+    // 按坐标查找
+    for (const m of currentMarkers) {
+      const pos = m.getLatLng()
+      if (Math.abs(pos.lat - lat) < 0.001 && Math.abs(pos.lng - lng) < 0.001) {
+        marker = m
+        break
+      }
    }
  }
+  if (!marker) return
+
+  setActiveMarker(marker)
+  marker.openPopup()
 }

 // 地图跳转到指定坐标