Libt
/
multiple-police-situations
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update offLineMap.vue

This commit is contained in:
TimSpan 2024-10-16 15:28:51 +08:00
parent aca5e39d18
commit e0b8261193
1 changed files with 60 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/views/page/offLineMap.vue
View File

@ -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 = 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: ''
})
// 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)
// 点击事件，显示自定义信息窗体
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}'>
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)
})
}
})