抽屉列表点击infowindow显示

gassafety-web/src/utils/gaodeMapView.js

@@ -49,6 +49,7 @@ class gaodeMap {
   // 工人轨迹用的窗口
   markerPassedPolylineInfoWindow = null;
   view = null;
+  handleInfoWindowOpenFunc = null;
 
   //构造函数中设置中央点默认值
   constructor(center) {
@@ -101,8 +102,15 @@ class gaodeMap {
       // console.log("缩放开始")
       this.closeInfoWindow();
     });
+    this.myMap.on("moveend", () => {
+      if (this.handleInfoWindowOpenFunc) {
+        this.handleInfoWindowOpenFunc();
+        this.handleInfoWindowOpenFunc = null;
+      }
+    });
     this.districtBoundaries();
   }
+  // 地图移动结束
 
   /**
    * 获取map
@@ -156,7 +164,10 @@ class gaodeMap {
       }
     });
   }
-
+  // 地图中点平移
+  panTo(lnglat) {
+    this.myMap.panTo(lnglat);
+  }
   /**
    * 添加Market
    * @param markerType
@@ -247,10 +258,10 @@ class gaodeMap {
       DEVICE_TYPE.SMALLINSPECTOR != markerType
     ) {
       // marker.content = this.getMarketContent(data, markerInfoWindow);
-      marker.on("mouseover", infoOpen);
+      marker.infoWindow = infoWindow;
+      marker.on("mouseover", that.infoOpen);
       marker.on("mouseout", infoClose);
       marker.setExtData(data);
-
       that.deviceType = markerType;
       let editWindow = that.createInfowindow("编辑");
       editWindow.fileArr =
@@ -327,16 +338,21 @@ class gaodeMap {
       //infoWindow.close(map, e.target.getPosition());
     }
 
-    function infoOpen(e) {
+    // function infoOpen(e) {}
+
+    return marker;
+  }
+
+  infoOpen = e => {
     if (e.target.getExtData().alarmState == 1) {
       if (e.target.getExtData().deviceType == 4) {
-          that.markerType = "7";
+        this.markerType = "7";
       } else if (e.target.getExtData().deviceType <= 3) {
-          that.markerType = +e.target.getExtData().deviceType + 1 + "";
+        this.markerType = +e.target.getExtData().deviceType + 1 + "";
       }
-        console.log("that.markerType", that.markerType);
+      console.log("that.markerType", this.markerType);
       // 警告状态这样就要换infowindow
-        e.target.content = that.getMarketContent(
+      e.target.content = this.getMarketContent(
         e.target.getExtData(),
         markerInfoWindowWarn
       );
@@ -348,12 +364,12 @@ class gaodeMap {
       //     : e.target.getExtData().deviceType + "";
       // 上图状态跟后台状态不统一，所以需要判断一下
       if (e.target.getExtData().deviceType == 4) {
-          that.markerType = "7";
+        this.markerType = "7";
       } else if (e.target.getExtData().deviceType <= 3) {
-          that.markerType = +e.target.getExtData().deviceType + 1 + "";
+        this.markerType = +e.target.getExtData().deviceType + 1 + "";
       }
-        console.log("that.markerType");
-        e.target.content = that.getMarketContent(
+      console.log("this.markerType");
+      e.target.content = this.getMarketContent(
         e.target.getExtData(),
         markerInfoWindow
       );
@@ -362,20 +378,16 @@ class gaodeMap {
     let options = map.getStatus();
     options.scrollWheel = false;
     map.setStatus(options);
-      infoWindow.setContent(e.target.content);
-      infoWindow.open(map, e.target.getPosition());
+    e.target.infoWindow.setContent(e.target.content);
+    e.target.infoWindow.open(map, e.target.getPosition());
 
     // 检测是否碰到底部的bottomData
-      that.boxCollision(infoWindow.dom);
+    this.boxCollision(e.target.infoWindow.dom);
     // that.addCloneDome(e.target, infoWindow);
     // infoWindow.close();
 
-      that.markerInfoWindow = infoWindow;
-    }
-
-    return marker;
-  }
-
+    this.markerInfoWindow = e.target.infoWindow;
+  };
   /**
    * marker添加拖拽事件
    */
@@ -399,7 +411,7 @@ class gaodeMap {
    * @returns {string}
    */
   getMarketContent(Data, markerInfoWindow) {
-    let data = {...Data}
+    let data = { ...Data };
     data.class = this;
     console.log("this.markerType", this.markerType);
     switch (this.markerType) {
@@ -407,7 +419,7 @@ class gaodeMap {
         const dom = createPop(markerInfoWindow, {
           title: "调压箱",
           data: data,
-          map: map,
+          map: map
         });
         const html = dom.$el;
         dom.remove();
@@ -715,17 +727,41 @@ class gaodeMap {
       // 信息窗体
       this.newLineAddEvent(polyline);
       //添加事件
-      polyline.on("mouseover", e => {
+      polyline.on("mouseover", this.polylineMouseOver);
+
+      polyline.on("mouseout", e => {
+        // console.log("polyline.getExtData().lineData.alarmState",polyline.getExtData().lineData.alarmState)
+        if (polyline.getExtData().lineData.alarmState == 1) return;
+        polyline.setOptions({ strokeColor: "#F7FE38" });
+        // infoWindow.close();
+      });
+      // 计算info的位置
+      // function infoPosition() {}
+    }
+    map.add(this.polyLines);
+    // 缩放地图到合适的视野级别
+    // map.setFitView();
+  }
+  // 鼠标移入线条执行
+  polylineMouseOver = e => {
+    let polyline = e.target;
     if (this.lineType == 1) return;
     // 生成infoWindow
     let infoWindow;
     // 警告状态时
+    const item = e.target.getExtData().lineData;
+    // console.log("item",item)
+
     if (e.target.getExtData().lineData.alarmState == 1) {
       infoWindow = this.lineMouseOver(polyline, lineInfoWindowWarn, item);
     } else {
       infoWindow = this.lineMouseOver(polyline, lineInfoWindow, item);
     }
     infoWindow.open(map, e.lnglat);
+    console.log(infoWindow);
+    // 如果是鼠标真正移入，则计算位置，如果不是鼠标真正移入，是人为执行出现infowindow，则不计算位置
+    console.log("e.originEvent", e.originEvent);
+    if (e.originEvent) {
       // 上方导航的高
       const topBar = 81;
       // 坐标导航的宽
@@ -772,25 +808,15 @@ class gaodeMap {
       } else {
         polyline.setOptions({ strokeColor: "#FF5A67" });
       }
-
       infoWindow.setOffset(new AMap.Pixel(X, Y));
+    } else {
+      infoWindow.setOffset(new AMap.Pixel(20, -20));
+    }
     this.boxCollision(infoWindow.dom);
     this.showInfoWindow = infoWindow;
     // const
-      });
-      polyline.on("mouseout", e => {
-        // console.log("polyline.getExtData().lineData.alarmState",polyline.getExtData().lineData.alarmState)
-        if (polyline.getExtData().lineData.alarmState == 1) return;
-        polyline.setOptions({ strokeColor: "#F7FE38" });
-        // infoWindow.close();
-      });
-      // 计算info的位置
-      // function infoPosition() {}
-    }
-    map.add(this.polyLines);
-    // 缩放地图到合适的视野级别
-    // map.setFitView();
-  }
+  };
+
   lineMouseOver(polyline, lineInfoWindow, item) {
     let dom = createPop(lineInfoWindow, {
       obj: { a: 123, editorPage: true, ...item, polyline }