feat:车辆GPS

wanglizhong

2025-05-03 de26c331fc9febdc11b85ff98ad657fb12cc2b73

 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,6 +351,7 @@
              padding: "2px 6px",
              borderRadius: "3px",
            });

            marker = new BMap.Marker(bdPoint,{rotation:direction});
            marker.setLabel(label);
          } else {
@@ -365,6 +370,21 @@
              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();
@@ -500,6 +520,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);
            }