Compare commits
2 Commits
5d600041cf
...
49ae2970bf
Author | SHA1 | Date | |
---|---|---|---|
49ae2970bf | |||
20aa050e75 |
@ -50,20 +50,20 @@ const onMessage = (res) => {
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const isReload = localStorage.getItem("isReload");
|
||||
if (isReload !== "true") {
|
||||
ElMessageBox.alert("由于浏览器安全策略,用户必须点击屏幕才能播放告警声音", "提示", {
|
||||
confirmButtonText: "OK",
|
||||
callback: () => {
|
||||
localStorage.setItem("isReload", "true");
|
||||
},
|
||||
});
|
||||
}
|
||||
// const isReload = localStorage.getItem("isReload");
|
||||
// if (isReload !== "true") {
|
||||
// ElMessageBox.alert("由于浏览器安全策略,用户必须点击屏幕才能播放告警声音", "提示", {
|
||||
// confirmButtonText: "OK",
|
||||
// callback: () => {
|
||||
// localStorage.setItem("isReload", "true");
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
|
||||
if (ws.socket == null) {
|
||||
ws.connect();
|
||||
}
|
||||
ws.onMessage(onMessage);
|
||||
// if (ws.socket == null) {
|
||||
// ws.connect();
|
||||
// }
|
||||
// ws.onMessage(onMessage);
|
||||
|
||||
window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
});
|
||||
|
@ -106,39 +106,34 @@ export class MapCustom {
|
||||
newIcon(option) {
|
||||
let data = {
|
||||
size: new AMap.Size(36, 42),
|
||||
image: '', // Icon的图像
|
||||
image: option.image, // Icon的图像
|
||||
imageSize: new AMap.Size(36, 42)
|
||||
}
|
||||
if (typeof option == 'string') {
|
||||
data.image = option
|
||||
} else {
|
||||
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]),
|
||||
}
|
||||
if (option.size) {
|
||||
data.size = new AMap.Size(option.size[0], option.size[1])
|
||||
data.imageSize = new AMap.Size(option.size[0], option.size[1])
|
||||
}
|
||||
return new AMap.Icon({ ...data })
|
||||
}
|
||||
// 创建marker
|
||||
marker({ icon, position, offset }) {
|
||||
marker(option) {
|
||||
return new AMap.Marker({
|
||||
icon,
|
||||
position,
|
||||
map: this.map,
|
||||
offset: new AMap.Pixel(-13, -26),
|
||||
...option
|
||||
})
|
||||
}
|
||||
lngLat(lng, lat) {
|
||||
return new AMap.LngLat(lng, lat);
|
||||
}
|
||||
infoWindow(option = {
|
||||
anchor: 'bottom-center',
|
||||
isCustom: true, //使用自定义窗体
|
||||
content: document.querySelector('.infoBox'),
|
||||
offset: new AMap.Pixel(-2, -40),
|
||||
}) {
|
||||
return new AMap.InfoWindow(option)
|
||||
infoWindow(option) {
|
||||
return new AMap.InfoWindow({
|
||||
anchor: 'bottom-center',
|
||||
isCustom: true,
|
||||
content: document.querySelector('.infoBox'),
|
||||
offset: new AMap.Pixel(-2, -40),
|
||||
...option
|
||||
})
|
||||
|
||||
}
|
||||
//绘制轨迹线条
|
||||
|
@ -281,7 +281,7 @@ const getData = async () => {
|
||||
|
||||
map.clearMap();
|
||||
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] });
|
||||
marker.setMap(map.map);
|
||||
marker.on("click", () => {
|
||||
|
@ -62,11 +62,11 @@ const getLocateRecord = () => {
|
||||
list.forEach((item, index) => {
|
||||
let marker: any = "";
|
||||
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) {
|
||||
marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat] });
|
||||
marker = newMap.marker({ icon: endIcon, position: [item.lng, item.lat], zIndex: 13 });
|
||||
} 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.on("click", () => {
|
||||
|
@ -68,8 +68,10 @@ import { locateRecord } from "@/api";
|
||||
import { format } from "@/utils";
|
||||
import { TLocateRecord } from "@/api/index.d";
|
||||
import { useRoute } from "vue-router";
|
||||
import location from "@/assets/img/location.png";
|
||||
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();
|
||||
let d = new Date();
|
||||
@ -105,9 +107,28 @@ const getLocateRecord = () => {
|
||||
newMap.clearMap();
|
||||
newMap.setCenter([list[0].lng, list[0].lat]);
|
||||
newMap.polyline(list);
|
||||
let icon = newMap.newIcon(location);
|
||||
list.forEach((item) => {
|
||||
let marker = newMap.marker({ icon, position: [item.lng, item.lat] });
|
||||
let startIcon = newMap.newIcon({
|
||||
image: startMarker,
|
||||
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.on("click", () => {
|
||||
deviceInfo.value = item;
|
||||
|
Loading…
x
Reference in New Issue
Block a user