From e0b8261193a09408eff2efc26c6bb28ce42a23ea Mon Sep 17 00:00:00 2001
From: TimSpan <cat20201314@163.com>
Date: Wed, 16 Oct 2024 15:28:51 +0800
Subject: [PATCH] Update offLineMap.vue

---
 src/views/page/offLineMap.vue | 108 +++++++++++++++++++---------------
 1 file changed, 60 insertions(+), 48 deletions(-)

diff --git a/src/views/page/offLineMap.vue b/src/views/page/offLineMap.vue
index c441c5e2..de8c2baf 100644
--- a/src/views/page/offLineMap.vue
+++ b/src/views/page/offLineMap.vue
@@ -370,8 +370,6 @@
   </div>
 </template>
 <script lang="ts" setup>
-// import L, {Marker} from 'leaflet'
-// import * as Leaf from 'leaflet'
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
 import 'leaflet.markercluster'
@@ -834,29 +832,37 @@ const getdayline = () => {
               // 将 marker 添加到地图
               marker.addTo(state.map)
             } else {
-              
-              // const marker = new AMap.Marker({
-              //   position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
-              //   offset: new AMap.Pixel(-20, -10),
-              //   content: `<div class="indexMarkerImg">
-              //                                      <img style="width:30px;height:30px;left:9px;top:7px" src='${no}'>
-              //                                     <div class="markerClass">
-              //                                         <div></div>
-              //                                         <div></div>
-              //                                         <div></div>
-              //                                     </div>
-              //                                 </div>`,
-              //   title: ''
-              // })
-              // marker.on('click', function () {
-              //   deviceInfoWindow.value = new AMap.InfoWindow({
-              //     isCustom: true, //使用自定义窗体
-              //     content: createSubstanceInfowindow1(x, '1'),
-              //     offset: new AMap.Pixel(5, -13)
-              //   })
-              //   deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
-              // })
-              // state.map.add(marker)
+              const marker = L.marker([lat, lng], {
+                icon: L.divIcon({
+                  className: 'indexMarkerImg',
+                  html: `<div class="indexMarkerImg">
+                      <img style="width:30px;height:60px;left:9px;top:7px" src="${no}">
+                      <div class="markerClass">
+                         <div></div>
+                         <div></div>
+                         <div></div>
+                       </div>
+                    </div>`,
+                  iconAnchor: [15, 30] // 根据需要调整锚点
+                }),
+                title: ''
+              })
+
+              // 点击事件，显示自定义信息窗体
+              marker.on('click', () => {
+                if (deviceInfoWindow.value) {
+                  deviceInfoWindow.value.remove()
+                }
+                deviceInfoWindow.value = L.popup({
+                  closeButton: false
+                })
+                  .setLatLng([lat, lng])
+                  .setContent(createSubstanceInfowindow1(x, '1'))
+                  .openOn(state.map)
+              })
+
+              // 将 marker 添加到地图
+              marker.addTo(state.map)
             }
           })
         }
@@ -915,10 +921,8 @@ const gettotal = () => {
       }
     })
 }
-//
 
 const selectA = (selectedKeys: any, e: any) => {
-  // if (selectedKeys[0].length >= 13) {
   try {
     console.log('selectedKeys', selectedKeys, e)
     let targetLatLngt = [e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude, e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude]
@@ -942,9 +946,6 @@ const selectA = (selectedKeys: any, e: any) => {
   } catch (error) {
     console.log('🚀 ~ selectA ~ error:', error)
   }
-
-  // state.map.setZoomAndCenter(205, targetLangLat)
-  // }
 }
 
 const createSubstanceInfowindow = (obj: any, type: any) => {
@@ -1258,28 +1259,39 @@ const getRealTimeAlarmSituation = () => {
       if (res.code == 0) {
         listData.value = res.data.reverse()
         res.data.map((x: any) => {
-          const marker = new AMap.Marker({
-            position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
-            offset: new AMap.Pixel(-10, -10),
-            content: `<div class="indexMarkerImg">
-                                           <img style="width:30px;height:60px;left:9px;top:7px" src='${image4}'>
-                                          <div class="markerClass">
-                                              <div></div>
-                                              <div></div>
-                                              <div></div>
-                                          </div>
-                                      </div>`,
+          const lat = x.latitude ?? 0
+          const lng = x.longitude ?? 0
+          const marker = L.marker([lat, lng], {
+            icon: L.divIcon({
+              className: 'indexMarkerImg',
+              html: `<div class="indexMarkerImg">
+                      <img style="width:30px;height:60px;left:9px;top:7px" src="${image4}">
+                      <div class="markerClass">
+                         <div></div>
+                         <div></div>
+                         <div></div>
+                       </div>
+                    </div>`,
+              iconAnchor: [15, 30] // 根据需要调整锚点
+            }),
             title: ''
           })
-          marker.on('click', function () {
-            deviceInfoWindow.value = new AMap.InfoWindow({
-              isCustom: true, //使用自定义窗体
-              content: createSubstanceInfowindow1(x, '1'),
-              offset: new AMap.Pixel(5, -13)
+
+          // 点击事件，显示自定义信息窗体
+          marker.on('click', () => {
+            if (deviceInfoWindow.value) {
+              deviceInfoWindow.value.remove()
+            }
+            deviceInfoWindow.value = L.popup({
+              closeButton: false
             })
-            deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
+              .setLatLng([lat, lng])
+              .setContent(createSubstanceInfowindow1(x, '1'))
+              .openOn(state.map)
           })
-          state.map.add(marker)
+
+          // 将 marker 添加到地图
+          marker.addTo(state.map)
         })
       }
     })