2025年04月29日09:43:09

This commit is contained in:
luojiayi 2025-04-29 09:43:10 +08:00
parent 5d600041cf
commit 20aa050e75
4 changed files with 43 additions and 23 deletions

View File

@ -50,20 +50,20 @@ const onMessage = (res) => {
}; };
onMounted(() => { onMounted(() => {
const isReload = localStorage.getItem("isReload"); // const isReload = localStorage.getItem("isReload");
if (isReload !== "true") { // if (isReload !== "true") {
ElMessageBox.alert("由于浏览器安全策略,用户必须点击屏幕才能播放告警声音", "提示", { // ElMessageBox.alert("", "", {
confirmButtonText: "OK", // confirmButtonText: "OK",
callback: () => { // callback: () => {
localStorage.setItem("isReload", "true"); // localStorage.setItem("isReload", "true");
}, // },
}); // });
} // }
if (ws.socket == null) { // if (ws.socket == null) {
ws.connect(); // ws.connect();
} // }
ws.onMessage(onMessage); // ws.onMessage(onMessage);
window.addEventListener("beforeunload", handleBeforeUnload); window.addEventListener("beforeunload", handleBeforeUnload);
}); });

View File

@ -121,12 +121,11 @@ export class MapCustom {
return new AMap.Icon({ ...data }) return new AMap.Icon({ ...data })
} }
// 创建marker // 创建marker
marker({ icon, position, offset }) { marker(option) {
return new AMap.Marker({ return new AMap.Marker({
icon,
position,
map: this.map, map: this.map,
offset: new AMap.Pixel(-13, -26), offset: new AMap.Pixel(-13, -26),
...option
}) })
} }
lngLat(lng, lat) { lngLat(lng, lat) {

View File

@ -62,11 +62,11 @@ const getLocateRecord = () => {
list.forEach((item, index) => { list.forEach((item, index) => {
let marker: any = ""; let marker: any = "";
if (index == 0) { if (index == 0) {
marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat] }); marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat], zIndex: 13 });
} else if (index == list.length - 1) { } else if (index == list.length - 1) {
marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat] }); marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat], zIndex: 13 });
} else { } else {
marker = newMap.marker({ icon: ViaIcon, position: [item.lng, item.lat] }); marker = newMap.marker({ icon: ViaIcon, position: [item.lng, item.lat], zIndex: 12 });
} }
marker.setMap(newMap.map); marker.setMap(newMap.map);
marker.on("click", () => { marker.on("click", () => {

View File

@ -68,8 +68,10 @@ import { locateRecord } from "@/api";
import { format } from "@/utils"; import { format } from "@/utils";
import { TLocateRecord } from "@/api/index.d"; import { TLocateRecord } from "@/api/index.d";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import location from "@/assets/img/location.png";
import InfoWindow from "@/components/InfoWindow.vue"; import InfoWindow from "@/components/InfoWindow.vue";
import ViaMarker from "@/assets/img/via-marker.png";
import endMarker from "@/assets/img/end-marker.png";
import startMarker from "@/assets/img/start-marker.png";
const { query } = useRoute(); const { query } = useRoute();
let d = new Date(); let d = new Date();
@ -105,9 +107,28 @@ const getLocateRecord = () => {
newMap.clearMap(); newMap.clearMap();
newMap.setCenter([list[0].lng, list[0].lat]); newMap.setCenter([list[0].lng, list[0].lat]);
newMap.polyline(list); newMap.polyline(list);
let icon = newMap.newIcon(location); let startIcon = newMap.newIcon({
list.forEach((item) => { image: startMarker,
let marker = newMap.marker({ icon, position: [item.lng, item.lat] }); size: [20, 29],
});
let endIcon = newMap.newIcon({
image: endMarker,
size: [20, 29],
});
let ViaIcon = newMap.newIcon({
image: ViaMarker,
size: [20, 29],
});
list.forEach((item, index) => {
let marker: any = "";
if (index == 0) {
marker = newMap.marker({ icon: startIcon, position: [item.lng, item.lat], zIndex: 13 });
} else if (index == list.length - 1) {
marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat], zIndex: 13 });
} else {
marker = newMap.marker({ icon: ViaIcon, position: [item.lng, item.lat], zIndex: 12 });
}
marker.setMap(newMap.map); marker.setMap(newMap.map);
marker.on("click", () => { marker.on("click", () => {
deviceInfo.value = item; deviceInfo.value = item;