Преглед изворни кода

修复地图缩放时起点/终点图标偏离路线的问题

  - 缩放后通过 setContent 用当前像素值重建起点/终点 marker 内容,触发高德重新计算 anchor 偏移
  - 新增 startEndMarkers 数组记录起点/终点 marker 引用,zoomend 时调用 rebuildStartEndMarkers 重建
  - 路线重绘时同步清空 startEndMarkers
画安 пре 1 недеља
родитељ
комит
80fb5ae905
1 измењених фајлова са 28 додато и 0 уклоњено
  1. 28 0
      src/components/TongzhouTrafficMap.vue

+ 28 - 0
src/components/TongzhouTrafficMap.vue

@@ -87,6 +87,7 @@ export default {
       statusIntersections: {},
       statusIntersections: {},
       currentZoomSize: 20, // 保存当前的动态尺寸(与 zoom=15 基准一致)
       currentZoomSize: 20, // 保存当前的动态尺寸(与 zoom=15 基准一致)
       markerById: {}, // ID → marker 索引,加速 focusById 查找
       markerById: {}, // ID → marker 索引,加速 focusById 查找
+      startEndMarkers: [], // 起点/终点 marker 引用,缩放时需重建
       subAreaOverlays: [], // 子区蒙层覆盖物
       subAreaOverlays: [], // 子区蒙层覆盖物
     };
     };
   },
   },
@@ -141,6 +142,7 @@ export default {
         }
         }
       });
       });
       this.routeGroups = {};
       this.routeGroups = {};
+      this.startEndMarkers = [];
     }
     }
 
 
     // 4. 清理子区蒙层
     // 4. 清理子区蒙层
@@ -316,6 +318,7 @@ export default {
         this.map.on('zoomend', () => {
         this.map.on('zoomend', () => {
           if (!this.isComponentDestroyed) {
           if (!this.isComponentDestroyed) {
             this.currentZoomSize = this.getDotSizeByZoom();
             this.currentZoomSize = this.getDotSizeByZoom();
+            this.rebuildStartEndMarkers();
           }
           }
         });
         });
       } catch (err) {
       } catch (err) {
@@ -446,6 +449,7 @@ export default {
       });
       });
 
 
       this.routeGroups = {};
       this.routeGroups = {};
+      this.startEndMarkers = [];
       this.dotMarkers = [];
       this.dotMarkers = [];
     },
     },
 
 
@@ -940,6 +944,25 @@ export default {
     },
     },
 
 
     /**
     /**
+     * 缩放后重建起点/终点 marker,让高德重新计算 anchor 偏移
+     */
+    rebuildStartEndMarkers() {
+      if (!this.map || this.startEndMarkers.length === 0) return;
+      for (const entry of this.startEndMarkers) {
+        const { marker, position, config, type } = entry;
+        // 生成新的 content HTML(此时 CSS 变量已更新)
+        const size = this.currentZoomSize;
+        const specialSize = Math.max(12, size * 1.2);
+        const newContent = `
+          <div class="pure-light-node start-end-node" style="width: ${specialSize}px; height: ${specialSize + 6}px; background: transparent; border: none; display: flex; justify-content: center; align-items: flex-end; cursor: pointer; transform-origin: bottom center;">
+            <img src="${require(`@/assets/map/${type}.png`)}" style="width: 100%; height: auto; object-fit: contain; pointer-events: none;" />
+          </div>
+        `;
+        marker.setContent(newContent);
+      }
+    },
+
+    /**
      * 创建交通信号灯标记
      * 创建交通信号灯标记
      * @param {Array<number>|Object} position - 位置坐标
      * @param {Array<number>|Object} position - 位置坐标
      * @param {Object} config - 配置对象
      * @param {Object} config - 配置对象
@@ -1014,6 +1037,11 @@ export default {
         if (config.id) this.markerById[config.id] = marker;
         if (config.id) this.markerById[config.id] = marker;
         if (config['路口编号']) this.markerById[config['路口编号']] = marker;
         if (config['路口编号']) this.markerById[config['路口编号']] = marker;
 
 
+        // 记录起点/终点 marker,缩放时需重建以修正 anchor 偏移
+        if (isStartEnd) {
+          this.startEndMarkers.push({ marker, position: [lng, lat], config, type });
+        }
+
         marker.on('click', (e) => {
         marker.on('click', (e) => {
           if (this.isComponentDestroyed) return;
           if (this.isComponentDestroyed) return;
           const extData = e.target.getExtData();
           const extData = e.target.getExtData();