优化地图模式的功能以及效果

gassafety-web/src/utils/gaodeMap.js

@@ -86,13 +86,14 @@ class gaodeMap {
     this.myMap.on("movestart", () => {
       // console.log("地图平移");
       // 抽屉点击的时候让infowindow隐藏
+
       if (this.leftListClick) {
+        console.log("moveStart")
         this.closeInfoWindow();
       }
     });
     // 地图开始缩放删除infowindow
     this.myMap.on("zoomstart", () => {
-      // console.log("缩放开始")
       this.closeInfoWindow();
     });
     this.myMap.on("moveend", () => {
@@ -636,20 +637,28 @@ class gaodeMap {
     }
 
     polyline.infoWindow.setOffset(new AMap.Pixel(X, Y));
-    
+
     // 如果是戍边浮动出现infowindow 就让窗口在固定的位置出现，这样就不显得乱了
     if (e.type == "mouseover") {
       const { coordinates } = polyline.getExtData().lineData;
       // 计算出前两个点的中点
       const arr1 = eval(coordinates)[0];
       const arr2 = eval(coordinates)[1];
-      const a = this.centerNum(arr1[0],arr2[0]);
-      const b= this.centerNum(arr1[1],arr2[1]);
-      const a2 = this.centerNum(a,arr1[0])
-      const b2 = this.centerNum(b,arr1[1])
+      const a = this.centerNum(arr1[0], arr2[0]);
+      const b = this.centerNum(arr1[1], arr2[1]);
+      const a2 = this.centerNum(a, arr1[0]);
+      const b2 = this.centerNum(b, arr1[1]);
       polyline.infoWindow.open(map, [a2, b2]);
     } else {
+      console.log("windowOpen");
+      // 变成异步，最后执行
       polyline.infoWindow.open(map, e.lnglat);
+
+      // setTimeout(() => {
+      //   console.log(polyline.infoWindow.getIsOpen())
+      //   polyline.infoWindow.open(map, e.lnglat);
+      // }, 0);
+      // console.log(polyline.infoWindow.)
     }
     // polyline.infoWindow=infoWindow;
     this.showInfoWindow = polyline.infoWindow;
@@ -662,8 +671,8 @@ class gaodeMap {
       item.setOptions({ strokeColor: "#2EE7E7" });
     });
   }
-  centerNum(num1,num2){
-    return (Number(num1)+Number(num2) )/2
+  centerNum(num1, num2) {
+    return (Number(num1) + Number(num2)) / 2;
   }
   // 创建一条新的线
   createNewLine() {
@@ -697,6 +706,7 @@ class gaodeMap {
   }
   // 新建line增加编辑以及右键菜单
   closeInfoWindow() {
+
     this.showInfoWindow && this.showInfoWindow.close();
     this.markerInfoWindow && this.markerInfoWindow.close();
   }

gassafety-web/src/views/device/map/index.vue

@@ -101,6 +101,7 @@
       ref="drawer"
       class="drawer"
       :class="{ back: backFlag, opacity: drawerOpacity }"
+      @click.stop="drawerdrawer"
     >
       <div class="switch" @click="backFlag = !backFlag">
         <img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
@@ -324,7 +325,10 @@ export default {
     // 左边的Bar修改值
     leftBarChange(item) {
       // this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
-
+      // 关闭infowindow
+      this.gaoMap.closeInfoWindow();
+      // 恢复颜色
+      this.gaoMap.polyLinesColorClear();
       const index = this.leftBarNum.indexOf(item.value);
       if (index >= 0) {
         this.leftBarNum.splice(index, 1);
@@ -563,7 +567,7 @@ export default {
         this.gaoMap.closeInfoWindow();
       }
       // 如果没有选择的时候点window 则高亮消失
-      console.log(this.targetNum)
+      console.log(this.targetNum);
       if (this.targetNum == 1 && this.iconClass == "icon-create") {
         this.targetNum = 0;
       }
@@ -588,9 +592,18 @@ export default {
       });
       this.initMap();
     },
-
+    drawerdrawer() {
+      // 关闭infowindow
+      this.gaoMap.closeInfoWindow();
+      // 恢复颜色
+      this.gaoMap.polyLinesColorClear();
+    },
     // 向右的箭头的动画
     arrowRightChange(item) {
+      // 关闭infowindow
+      this.gaoMap.closeInfoWindow();
+      // 恢复颜色
+      this.gaoMap.polyLinesColorClear();
       const index = this.arrowRightNum.indexOf(item.value);
       if (index >= 0) {
         this.arrowRightNum.splice(index, 1);
@@ -742,14 +755,9 @@ export default {
             path = [a, b - 0.1];
             // 线条infowindow显示中间,保留六位转换字符串，否则有时候会出现一些问题
             iten.infoPath = [a.toFixed(6), b.toFixed(6)];
-            console.log(path);
           } else {
             path = [iten.path[0], iten.path[1] - 0.1];
           }
-          // const path =
-          //   item.value == 1
-          //     ? [iten.lnglat[0], iten.lnglat[1] - 0.1]
-          //     : [iten.path[0], iten.path[1] - 0.1];
           this.gaoMap.panTo(path);
         }
       }
@@ -759,10 +767,7 @@ export default {
       if (item.value == 1) {
         this.polylineInfoWindowShow(iten, lat, lng);
       } else if (item.value == 9) {
-        // 工作人员
-        // this.workerManInfoWindowShow(iten, lat, lng);
       } else if (item.value == 8) {
-        // this.trouleInfoWindowShow(iten, lat, lng);
       } else {
         // 其他设备
         this.diveceInfoWindowShow(iten, lat, lng);
@@ -781,12 +786,21 @@ export default {
       };
       // console.log(target.getOptions());
       // 如果是原地不动，就直接执行
-      if (iten.infoPath[0] == lng && iten.infoPath[1] == lat + 0.1) {
+      // console.log(iten.infoPath, lng, lat + 0.1);
+      console.log(iten.infoPath[0] - lng, iten.infoPath[1] - (lat + 0.1));
+      // 因为计算问题，误差小于0.00001就没动
+      if (
+        iten.infoPath[0] - lng >= 0 &&
+        iten.infoPath[0] - lng <= 0.00001 &&
+        iten.infoPath[1] - (lat + 0.1) >= 0 &&
+        iten.infoPath[1] - (lat + 0.1) <= 0.00001
+      ) {
+        // console.log('进来了')
+        this.gaoMap.leftListClick = false;
         this.gaoMap.polylineMouseOver(e);
         target.setOptions({ strokeColor: "#F7FE38" });
         return;
       }
-
       // 因为地图移动的时候infowindow无法显示
       this.gaoMap.handleInfoWindowOpenFunc = () => {
         this.gaoMap.polylineMouseOver(e);
@@ -804,7 +818,9 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      if (iten.path[0] == lng && iten.path[1] == lat) {
+      console.log(iten.path, lng, lat);
+      if (iten.path[0] == lng && iten.path[1] == lat + 0.1) {
+        console.log("9999999999");
         this.gaoMap.infoOpen(e);
         return;
       }

gassafety-web/src/views/enterprise/mapView/index.vue

@@ -382,7 +382,7 @@ export default {
 
       //  左边抽屉 内嵌scroll盒子的高
       boxHeight: "",
-      boxWidth:"",
+      boxWidth: "",
       drawerOpacity: false,
       //抽屉是否收回
       backFlag: true,
@@ -414,7 +414,7 @@ export default {
     onResize() {
       this.boxHeight = document.body.clientHeight - 81;
       this.boxWidth = document.body.clientWidth;
-      console.log("挂在")
+      console.log("挂在");
     },
     initMap() {
       let gaoMap = new gaodeMap("石家庄");
@@ -872,8 +872,16 @@ export default {
         lnglat: iten.infoPath,
       };
       // console.log(target.getOptions());
+      console.log(iten.infoPath[0] - lng, iten.infoPath[1] - (lat + 0.1));
+
       // 如果是原地不动，就直接执行
-      if (iten.infoPath[0] == lng && iten.infoPath[1] == lat + 0.1) {
+      // if (iten.infoPath[0] == lng && iten.infoPath[1] == lat + 0.1) {
+      if (
+        iten.infoPath[0] - lng >= 0 &&
+        iten.infoPath[0] - lng <= 0.00001 &&
+        iten.infoPath[1] - (lat + 0.1) >= 0 &&
+        iten.infoPath[1] - (lat + 0.1) <= 0.00001
+      ) {
         this.gaoMap.polylineMouseOver(e);
         target.setOptions({ strokeColor: "#F7FE38" });
         return;