From 45e02578775f7e05e41923af4294c3617e26bd13 Mon Sep 17 00:00:00 2001
From: wzp <2040239371@qq.com>
Date: 星期日, 04 五月 2025 18:58:50 +0800
Subject: [PATCH] feat: 优化匿名，和详情页
---
ruoyi-ui/src/views/system/gps/map.vue | 85 ++++++++++++++++++++++++++++++++++--------
1 files changed, 68 insertions(+), 17 deletions(-)
diff --git a/ruoyi-ui/src/views/system/gps/map.vue b/ruoyi-ui/src/views/system/gps/map.vue
index 2e93143..f96f1a6 100644
--- a/ruoyi-ui/src/views/system/gps/map.vue
+++ b/ruoyi-ui/src/views/system/gps/map.vue
@@ -151,10 +151,14 @@
};
},
created() {
- // 鑾峰彇URL鍙傛暟涓殑杞︾墝鍙�
- const vehicleNo = this.$route.query.vehicleNo;
- if (vehicleNo) {
- this.queryParams.vehicleNo = vehicleNo;
+ // 鑾峰彇URL鍙傛暟
+ const query = this.$route.query;
+ if (query.vehicleNo) {
+ this.queryParams.vehicleNo = query.vehicleNo;
+ }
+ // 璁剧疆鏃堕棿鑼冨洿
+ if (query.startTime && query.endTime) {
+ this.dateRange = [query.startTime, query.endTime];
}
this.getList();
},
@@ -347,11 +351,11 @@
padding: "2px 6px",
borderRadius: "3px",
});
+
marker = new BMap.Marker(bdPoint,{rotation:direction});
marker.setLabel(label);
} else {
// 缁堢偣鏄剧ず杞﹁締鍥炬爣
-
const myIcon = new BMap.Icon(
"/car_blue.png",
new BMap.Size(20, 20),
@@ -365,6 +369,20 @@
rotation: direction,
});
}
+ //鍦ㄨ溅鍥炬爣涓婃樉绀鸿溅鐗�
+ const label = new BMap.Label(currentSegment[index].vehicleNo, {
+ offset: new BMap.Size(0, -25), // 鍚戜笂鍋忕Щ25鍍忕礌
+ position: bdPoint,
+ });
+ label.setStyle({
+ color: "white",
+ fontSize: "12px",
+ backgroundColor: "#3388ff",
+ border: "none",
+ padding: "2px 6px",
+ borderRadius: "3px",
+ });
+ marker.setLabel(label);
// 鑾峰彇鍦板潃淇℃伅
const geoc = new BMap.Geocoder();
@@ -377,13 +395,14 @@
addComp.street +
addComp.streetNumber;
- // 娣诲姞淇℃伅绐楀彛
- const infoWindow = new BMap.InfoWindow(
- `鏃堕棿锛�${item.collectTime}<br/>閫熷害锛�${
- item.speed
- }km/h<br/>鏂瑰悜锛�${item.direction}掳<br/>鍦板潃锛�${address}`
- );
+ // 娣诲姞鐐瑰嚮浜嬩欢鐩戝惉鍣�
marker.addEventListener("click", () => {
+ // 鍒涘缓淇℃伅绐楀彛
+ const infoWindow = new BMap.InfoWindow(
+ `鏃堕棿锛�${currentSegment[index].collectTime}<br/>閫熷害锛�${
+ currentSegment[index].speed
+ }km/h<br/>鏂瑰悜锛�${currentSegment[index].direction}掳<br/>鍦板潃锛�${address}`
+ );
this.map.openInfoWindow(infoWindow, bdPoint);
});
});
@@ -455,12 +474,25 @@
});
marker.setLabel(label);
- // 娣诲姞淇℃伅绐楀彛
- const infoWindow = new BMap.InfoWindow(
- `鏃堕棿锛�${row.collectTime}<br/>閫熷害锛�${row.speed}km/h<br/>鏂瑰悜锛�${row.direction}掳<br/>鍦板潃锛�${row.address}`
- );
- marker.addEventListener("click", () => {
- this.map.openInfoWindow(infoWindow, data.points[0]);
+ // 鑾峰彇鍦板潃淇℃伅
+ const geoc = new BMap.Geocoder();
+ geoc.getLocation(data.points[0], (rs) => {
+ const addComp = rs.addressComponents;
+ const address =
+ addComp.province +
+ addComp.city +
+ addComp.district +
+ addComp.street +
+ addComp.streetNumber;
+
+ // 娣诲姞鐐瑰嚮浜嬩欢鐩戝惉鍣�
+ marker.addEventListener("click", () => {
+ // 鍒涘缓淇℃伅绐楀彛
+ const infoWindow = new BMap.InfoWindow(
+ `鏃堕棿锛�${row.collectTime}<br/>閫熷害锛�${row.speed}km/h<br/>鏂瑰悜锛�${row.direction}掳<br/>鍦板潃锛�${address}`
+ );
+ this.map.openInfoWindow(infoWindow, data.points[0]);
+ });
});
// 淇濆瓨褰撳墠鏍囪鐐瑰紩鐢�
@@ -500,6 +532,25 @@
convertor.translate([point], 1, 5, (data) => {
if (data.status === 0) {
const bdPoint = data.points[0];
+ //鏄剧ず杞﹁締鍥炬爣
+ const myIcon = new BMap.Icon(
+ "/car_blue.png",
+ new BMap.Size(20, 20),
+ {
+ imageSize: new BMap.Size(20, 20),
+ anchor: new BMap.Size(10, 10),
+ }
+ );
+ const marker = new BMap.Marker(bdPoint, {
+ icon: myIcon,
+ rotation: item.direction,
+ });
+ // 绉婚櫎涔嬪墠鐨勬爣璁扮偣
+ if (this.currentMarker) {
+ this.map.removeOverlay(this.currentMarker);
+ }
+ this.currentMarker=marker;
+ this.map.addOverlay(marker);
this.map.setCenter(bdPoint);
this.map.setZoom(15);
}
--
Gitblit v1.9.1