Compare commits

...

2 Commits

Author SHA1 Message Date
49ae2970bf 2025年04月29日09:47:14 2025-04-29 09:47:17 +08:00
20aa050e75 2025年04月29日09:43:09 2025-04-29 09:43:10 +08:00
5 changed files with 56 additions and 40 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

@ -106,39 +106,34 @@ export class MapCustom {
newIcon(option) { newIcon(option) {
let data = { let data = {
size: new AMap.Size(36, 42), size: new AMap.Size(36, 42),
image: '', // Icon的图像 image: option.image, // Icon的图像
imageSize: new AMap.Size(36, 42) imageSize: new AMap.Size(36, 42)
} }
if (typeof option == 'string') { if (option.size) {
data.image = option data.size = new AMap.Size(option.size[0], option.size[1])
} else { data.imageSize = new AMap.Size(option.size[0], option.size[1])
data = {
image: option.image, // Icon的图像
size: new AMap.Size(option.size[0], option.size[1]),
imageSize: new AMap.Size(option.size[0], option.size[1]),
}
} }
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) {
return new AMap.LngLat(lng, lat); return new AMap.LngLat(lng, lat);
} }
infoWindow(option = { infoWindow(option) {
anchor: 'bottom-center', return new AMap.InfoWindow({
isCustom: true, //使用自定义窗体 anchor: 'bottom-center',
content: document.querySelector('.infoBox'), isCustom: true,
offset: new AMap.Pixel(-2, -40), content: document.querySelector('.infoBox'),
}) { offset: new AMap.Pixel(-2, -40),
return new AMap.InfoWindow(option) ...option
})
} }
//绘制轨迹线条 //绘制轨迹线条

View File

@ -281,7 +281,7 @@ const getData = async () => {
map.clearMap(); map.clearMap();
map.setCenter([res.lng, res.lat]); map.setCenter([res.lng, res.lat]);
let icon = map.newIcon(location); let icon = map.newIcon({ image: location });
let marker = map.marker({ icon, position: [res.lng, res.lat] }); let marker = map.marker({ icon, position: [res.lng, res.lat] });
marker.setMap(map.map); marker.setMap(map.map);
marker.on("click", () => { marker.on("click", () => {

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;