首页地图修改

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(() => {
+      this.map.clearOverlays()
-        if (!this.map) {
-          this.initMap()
-        } else {
-          this.map.clearOverlays(); // 清除所有覆盖物
-        }
 
-        if (res.length > 0) {
+      if (res.length > 0) {
-          res.forEach((item) => {
+        res.forEach((item) => {
-            this.addMarker(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() {
+  // 移除 updated 钩子，避免数据变化时重复渲染地图导致标签偏移
-    this.getProjectList()
-  },
 }
 </script>