Selaa lähdekoodia

总览菜单点击弹窗位置优化:移除地图组件focusById中的InfoWindow弹窗,改用地图容器中心坐标定位SmartDialog,修复快速连续点击时旧定时器导致的位置偏移问题

画安 2 viikkoa sitten
vanhempi
commit
0ab6a353e7
2 muutettua tiedostoa jossa 14 lisäystä ja 11 poistoa
  1. 0 3
      src/components/TongzhouTrafficMap.vue
  2. 14 8
      src/views/StatusMonitoring.vue

+ 0 - 3
src/components/TongzhouTrafficMap.vue

@@ -1189,9 +1189,6 @@ export default {
       if (bestMarker) {
         const finalPos = bestMarker.getPosition();
         this.map.setZoomAndCenter(17, finalPos, false, 500);
-        setTimeout(() => {
-          if (!this.isComponentDestroyed) this.openLightInfo(bestMarker.getExtData(), finalPos);
-        }, 600);
         return finalPos;
       }
       return null;

+ 14 - 8
src/views/StatusMonitoring.vue

@@ -344,16 +344,22 @@ export default {
             }
 
             // 通过路口编号定位地图 marker,动画完成后计算像素位置再弹窗
+            if (this._menuClickTimer) {
+                clearTimeout(this._menuClickTimer);
+                this._menuClickTimer = null;
+            }
             if (this.$refs.trafficMapRef) {
                 const mapPos = this.$refs.trafficMapRef.focusById(nodeData.id);
                 if (mapPos) {
-                    const lngLat = mapPos.getLng ? [mapPos.getLng(), mapPos.getLat()] : mapPos;
-                    setTimeout(() => {
-                        const pixel = this.$refs.trafficMapRef.lngLatToPixel(lngLat[0], lngLat[1]);
-                        if (pixel) {
-                            const scale = window.innerWidth / 1920;
-                            nodeData.pixelX = Math.round(pixel.x / scale) + 20;
-                            nodeData.pixelY = Math.round(pixel.y / scale);
+                    this._menuClickTimer = setTimeout(() => {
+                        this._menuClickTimer = null;
+                        // 地图已居中到标记点,直接用地图容器中心作为弹窗位置
+                        const mapEl = this.$refs.trafficMapRef.$el;
+                        const scale = window.innerWidth / 1920;
+                        if (mapEl) {
+                            const rect = mapEl.getBoundingClientRect();
+                            nodeData.pixelX = Math.round((rect.left + rect.width / 2) / scale) + 5;
+                            nodeData.pixelY = Math.round((rect.top + rect.height / 2) / scale);
                         }
                         showDialog();
                     }, 600);
@@ -399,7 +405,7 @@ export default {
                 height: 260,
                 center: false,
                 showClose: true,
-                position: { x: (nodeData.pixelX || 950) + 20, y: nodeData.pixelY || 430 },
+                position: { x: (nodeData.pixelX || 950) + 5, y: nodeData.pixelY || 430 },
                 noPadding: false,
                 data: {
                     ...nodeData,