fix: 修复独栋地图图例点击失效的问题

app/src/components/Map.vue

@@ -129,6 +129,7 @@ export default {
       radius: 300,
       center: [],
       markers: [],
+      originMarkers: [],
       firePoint: null,
       icons: {
         currentJzKey: {
@@ -185,6 +186,7 @@ export default {
       showType: ["currentJzKey"],
       loading: false,
       markerCache: {
+        "currentJzKey": [],
         "xfscKey": [],
         "trsyKey": [],
         "xhsKey": [],
@@ -230,6 +232,7 @@ export default {
         return;
       }
       let showType = JSON.parse(JSON.stringify(this.showType));
+      console.log(this.markerCache)
       if (showType.indexOf(type) >= 0) {
         showType = showType.filter((p) => p !== type);
         this.markerCache[type].forEach(marker => {
@@ -296,10 +299,21 @@ export default {
         });
       }
       this.markers = markers;
-      this.initMap();
+      this.initMap().then(() => {
+        if (this.showType.length === 1 && this.showType[0] === "currentJzKey") {
+          // 缓存所有的节点数据
+          console.log(res.data.filter(p => p.type !== 'currentJzKey' || p.type !== 'jzKey'))
+          this.cacheAllMarkers(res.data.filter(p => p.type !== 'currentJzKey' || p.type !== 'jzKey').map(p => ({
+            icon: p.type,
+            position: [p.lon, p.lat],
+            anchor: "bottom-center",
+            data: JSON.parse(p.data),
+          })))
+        }
+      });
     },
-    initMap() {
-      AMapLoader.load({
+    async initMap() {
+      await AMapLoader.load({
         key: "4776c927b5ebe35e9e33e5b14ec78b8f", // 申请好的Web端开发者Key，首次调用 load 时必填
         version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
         plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
@@ -456,6 +470,83 @@ export default {
         new AMap.LngLat(this.firePoint.position[0], this.firePoint.position[1])
       );
     },
+    cacheAllMarkers(markerInfos) {
+      if (markerInfos && markerInfos.length > 0) {
+            const markers = [];
+            markerInfos.forEach((p, i) => {
+              const type = p.icon;
+              let infoContent = [];
+              if (type === "jzKey" || type === "currentJzKey") {
+                infoContent.push(p.data.gcjzmc);
+                infoContent.push(p.data.xxdz);
+                infoContent.push(p.data.jzdx);
+                infoContent.push("建筑高度：" + p.data.gd + "m");
+                infoContent.push("建成年代：" + p.data.jcnd + "年");
+              } else if (type === "xhsKey") {
+                infoContent.push(p.data.code);
+                infoContent.push(p.data.sylx);
+                infoContent.push(p.data.address);
+              } else if (type === "szxhsKey") {
+                infoContent.push(p.data.code);
+                infoContent.push(p.data.sylx);
+                infoContent.push(p.data.address);
+              } else if (type === "trsyKey") {
+                infoContent.push(p.data.code);
+                infoContent.push(p.data.sylx);
+                infoContent.push(p.data.address);
+              } else if (type === "xfscKey") {
+                infoContent.push(p.data.code);
+                infoContent.push(p.data.sylx);
+                infoContent.push(p.data.address);
+              } else if (type === "xfcKey") {
+                infoContent.push(p.data.cph);
+                infoContent.push(p.data.speed + "公里/小时");
+              } else if (type === "lldKey") {
+                infoContent.push(p.data.deviceName);
+                infoContent.push(p.data.cameraType);
+              } else if (type === "xfzKey") {
+                infoContent.push(p.data.mc);
+                infoContent.push("消防站（队站）");
+                infoContent.push(p.data.fzr + " " + p.data.fzrLxdh);
+              } else if (type === "jgKey") {
+                infoContent.push(p.data.dwmc);
+                infoContent.push("微型消防站");
+                infoContent.push(p.data.lxr + " " + p.data.lxdh);
+              }
+
+              const icon = JSON.parse(JSON.stringify(this.icons[p.icon]));
+              icon.size = new AMap.Size(icon.size[0], icon.size[1]);
+              icon.imageSize = new AMap.Size(
+                icon.imageSize[0],
+                icon.imageSize[1]
+              );
+              p.icon = new AMap.Icon(icon);
+              var marker = new AMap.Marker(p);
+              // // this.map.add(marker);
+              let content = [
+                "<div class='info_box_contant' style=\"line-height: 30px;min-width: 250px; padding: 20px; font-size: 20px; color: #7ea2ff; font-family: 'Abel';  background: rgba(0, 0, 0, 0.82);\">" +
+                  infoContent.join("<br />") +
+                  " </div>",
+              ];
+              const infoWindow = new AMap.InfoWindow({
+                isCustom: true, //使用自定义窗体
+                content: content.join("<br>"),
+                offset: new AMap.Pixel(0, -70),
+              });
+
+              marker.on("mouseover", (e) => {
+                infoWindow.open(this.map, p.position); //后面的参数指的是经纬度，在此显示窗口
+              });
+
+              marker.on("mouseout", (e) => {
+                infoWindow.close();
+              });
+              this.markerCache[type].push(marker)
+              markers.push(marker);
+            });
+            return markers;
+          }
+    },
     closeInfoWindow() {
       this.map.clearInfoWindow();
     },