Parcourir la source

fix: 调整地图路口圆点详情弹窗的出现事件,从click改为mouseover

sequoia tungfang il y a 1 mois
Parent
commit
4d0a4eb3b9
1 fichiers modifiés avec 53 ajouts et 2 suppressions
  1. 53 2
      src/components/TongzhouTrafficMap.vue

+ 53 - 2
src/components/TongzhouTrafficMap.vue

@@ -70,6 +70,9 @@ export default {
       isComponentDestroyed: false,
       drawSeq: 0,
       driving: null,
+      infoCloseTimer: null,
+      activeInfoWindowId: null,
+      isInfoWindowHovered: false,
       // 状态类型配置
       statusConfig: [
         { name: "中心计划", color: "#004CDE", type: "normal" },
@@ -156,6 +159,12 @@ export default {
     // 5. 清理其他引用
     this.AMap = null;
     this.driving = null;
+    if (this.infoCloseTimer) {
+      clearTimeout(this.infoCloseTimer);
+      this.infoCloseTimer = null;
+    }
+    this.activeInfoWindowId = null;
+    this.isInfoWindowHovered = false;
   },
   computed: {
     isAllSelected() {
@@ -683,11 +692,21 @@ export default {
 
         marker.on('click', (e) => {
           if (!this.isComponentDestroyed) {
-            this.openLightInfo(e.target.getExtData(), e.lnglat);
             this.$emit('map-crossing-click', e.target.getExtData(), e.lnglat);
           }
         });
 
+        marker.on('mouseover', (e) => {
+          if (this.isComponentDestroyed) return;
+          this.cancelCloseInfoWindow();
+          this.openLightInfo(e.target.getExtData(), e.lnglat);
+        });
+
+        marker.on('mouseout', () => {
+          if (this.isComponentDestroyed) return;
+          this.scheduleCloseInfoWindow();
+        });
+
         return marker;
       } catch (e) {
         console.warn('创建标记时出错:', e);
@@ -699,6 +718,7 @@ export default {
       if (!this.isMapReady()) return;
 
       const infoWindowId = `info-window-${Date.now()}`;
+      this.activeInfoWindowId = infoWindowId;
       const isAbnormal = ["离线", "降级", "故障"].includes(data.name);
       const deviceStatusText = isAbnormal ? data.name : '正常';
       const alarmInfoText = isAbnormal ? this.getAlarmInfoText(data.name) : '';
@@ -749,17 +769,48 @@ export default {
       this.infoWindow.setContent(content);
       this.infoWindow.open(this.map, position);
 
-      // 添加关闭按钮事件监听器
       setTimeout(() => {
+        if (this.activeInfoWindowId !== infoWindowId) return;
         const closeBtn = document.querySelector(`#${infoWindowId} .close-btn`);
         if (closeBtn) {
           closeBtn.addEventListener('click', () => {
             if (this.infoWindow) this.infoWindow.close();
           });
         }
+
+        const root = document.querySelector(`#${infoWindowId}`);
+        if (root) {
+          root.addEventListener('mouseenter', () => {
+            if (this.activeInfoWindowId !== infoWindowId) return;
+            this.isInfoWindowHovered = true;
+            this.cancelCloseInfoWindow();
+          });
+          root.addEventListener('mouseleave', () => {
+            if (this.activeInfoWindowId !== infoWindowId) return;
+            this.isInfoWindowHovered = false;
+            this.scheduleCloseInfoWindow();
+          });
+        }
       }, 100);
     },
 
+    cancelCloseInfoWindow() {
+      if (this.infoCloseTimer) {
+        clearTimeout(this.infoCloseTimer);
+        this.infoCloseTimer = null;
+      }
+    },
+
+    scheduleCloseInfoWindow() {
+      this.cancelCloseInfoWindow();
+      this.infoCloseTimer = setTimeout(() => {
+        if (this.isComponentDestroyed) return;
+        if (this.isInfoWindowHovered) return;
+        if (this.infoWindow) this.infoWindow.close();
+        this.activeInfoWindowId = null;
+      }, 160);
+    },
+
     getAlarmInfoText(statusName) {
       if (statusName === '离线') return '通讯中断设备离线';
       if (statusName === '降级') return '降级定周期控制';