From 2e5f9029e7b097b1b5f16d10b0b3c8b80d0285ac Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Wed, 28 Jan 2026 13:19:16 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=9C=B0=E5=9B=BE=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue | 60 +++++++++++++++++++++++++++++----------------
 1 file changed, 39 insertions(+), 21 deletions(-)

diff --git a/src/views/index.vue b/src/views/index.vue
index 2ce51eb..10884f6 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -4,7 +4,7 @@
 
     <div class="map-overlay" style="display: flex">
       <el-row >
-        <el-select v-model="queryParams.proId" placeholder="请选择工程" style="width: 100%" @change="getProjectList">
+        <el-select v-model="queryParams.proId" placeholder="请选择工程" style="width: 100%" @change="loadProjectMarkers">
           <el-option
             :key="item.proId"
             :value="item.proId"
@@ -54,30 +54,49 @@ export default {
 
     resetQuery(){
       this.queryParams.proId = undefined
-      this.getProjectList()
+      this.loadProjectMarkers()
     },
 
-    // 获取所有项目
-    async getProjectList() {
+    // 初始化地图并加载标记点
+    initMapAndLoadMarkers() {
+      if (!this.map) {
+        this.initMap()
+      }
+      // 使用命名函数确保可以正确移除监听器
+      const onTilesLoaded = () => {
+        this.loadProjectMarkers()
+        this.map.removeEventListener('tilesloaded', onTilesLoaded)
+      }
+      // 等待地图加载完成后再添加标记点
+      this.map.addEventListener('tilesloaded', onTilesLoaded)
+    },
+
+    // 加载项目标记点
+    async loadProjectMarkers() {
       const {rows: res} = await listProject({
         proId: this.queryParams.proId,
         pageNum: 1,
         pageSize: 1000,
       })
 
-      this.$nextTick(() => {
-        if (!this.map) {
-          this.initMap()
-        } else {
-          this.map.clearOverlays(); // 清除所有覆盖物
-        }
+      this.map.clearOverlays()
 
-        if (res.length > 0) {
-          res.forEach((item) => {
-            this.addMarker(item)
-          })
+      if (res.length > 0) {
+        res.forEach((item) => {
+          this.addMarker(item)
+        })
+
+        // 如果只有一个项目，定位到该项目
+        if (res.length === 1) {
+          const point = new BMapGL.Point(res[0].longitude, res[0].latitude)
+          this.map.centerAndZoom(point, 15)
         }
-      })
+      }
+    },
+
+    // 获取所有项目
+    async getProjectList() {
+      // 此方法已废弃，由 loadProjectMarkers 替代
     },
 
     // 地图初始化
@@ -102,8 +121,6 @@ export default {
 
       this.map.addOverlay(marker)
 
-      // 创建自定义图标，设置为#002db6颜色
-
       // 添加label在标点下方并居中
       const label = new BMapGL.Label(item.proName, {
         position: point,
@@ -143,13 +160,14 @@ export default {
   },
 
   created() {
-    this.getProjectList()
     this.getList()
+    // 确保地图容器已渲染完成后再初始化地图
+    this.$nextTick(() => {
+      this.initMapAndLoadMarkers()
+    })
   },
 
-  updated() {
-    this.getProjectList()
-  },
+  // 移除 updated 钩子，避免数据变化时重复渲染地图导致标签偏移
 }
 </script>