feat 修复感知事件 分页点击对应错乱问题

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js

@@ -106,8 +106,9 @@ export class MarkerCluster {
     const pageSize = 6;
     let page = 1;
     const totalPages = Math.ceil(data.length / pageSize);
-    const dataFirstPage =
+    const currentPageData =
       totalPages > 1 ? data.slice((page - 1) * pageSize, pageSize) : data;
+    window.currentPageData = currentPageData;
     window.pageSize = pageSize;
     window.page = page;
     window.totalPages = totalPages;
@@ -127,7 +128,7 @@ export class MarkerCluster {
 
       // 截取当前页的数据
       const currentPageData = data.slice(startIndex, endIndex);
-
+      window.currentPageData = currentPageData;
       const itemsTpl = currentPageData
         .map(
           (item) => `
@@ -144,15 +145,7 @@ export class MarkerCluster {
         .join("");
       // 渲染当前页数据
       dataContainer.innerHTML = itemsTpl;
-      window.infoWindow.dom
+      bindItemClick();
-        .querySelectorAll(".info-window-item")
-        .forEach((item, index) => {
-          item.onclick = () =>
-            data[index].config.markerClick?.(
-              data[index].extData,
-              data[index].config?.item
-            );
-        });
     }
 
     window.renderData = renderData;
@@ -173,7 +166,7 @@ export class MarkerCluster {
         <img class="info-close" style="width: 12px;cursor: pointer;" src="${require("@screen/images/dialog/icon-close.svg")}" />
       </div>
       <div id="dataContainer" style="padding: 15px 9px;flex: 1; overflow: auto;" class="info-window-content">
-        ${dataFirstPage
+        ${currentPageData
           .map(
             (item) => `
               <div style="cursor: pointer; padding: 3px 6px;display: flex;align-items: center; gap: 6px;" class="info-window-item">
@@ -199,7 +192,7 @@ export class MarkerCluster {
       }
     </div>`);
     window.infoWindow = this.infoWindow;
-    this.infoWindow.open(map, data[0].lnglat);
+    this.infoWindow.open(map, currentPageData[0].lnglat);
 
     this.infoWindow.dom.querySelector(".info-close").onclick = () =>
       this.infoWindow.close();
@@ -211,15 +204,20 @@ export class MarkerCluster {
     this.infoWindow.dom.querySelector(".info-window-content").onwheel = (e) =>
       e.stopPropagation();
 
-    this.infoWindow.dom
+    function bindItemClick() {
-      .querySelectorAll(".info-window-item")
+      window.infoWindow.dom
-      .forEach((item, index) => {
+        .querySelectorAll(".info-window-item")
-        item.onclick = () =>
+        .forEach((item, index) => {
-          data[index].config.markerClick?.(
+          item.onclick = () => {
-            data[index].extData,
+            const currentPageData = window.currentPageData;
-            data[index].config?.item
+            currentPageData[index].config.markerClick?.(
-          );
+              currentPageData[index].extData,
-      });
+              currentPageData[index].config?.item
+            );
+          };
+        });
+    }
+    bindItemClick();
   }
 
   async setMarkerCluster() {