fix:修复map加载显示问题

wanglizhong

2025-05-10 34044707d97b6396325c7fc4cac8d889fae96f85

 ruoyi-ui/src/views/system/gps/mapNeed.vue

@@ -127,7 +127,7 @@
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pageSize: 1000,
        deviceId: null,
        appId: null,
        sign: null,
@@ -175,12 +175,16 @@
  },
  mounted() {
    // 动态加载百度地图API
    this.loadBMapScript().then(() => {
      this.initMap();
    this.initMap().then((success) => {
      if (success) {
      window.initMapFlag=true;
      if(window.loadGpsList){
        this.drawTrack()
          this.drawTrack();
      }
      }
    }).catch(error => {
      console.error("地图初始化失败", error);
      this.$message.error("地图加载失败，请刷新页面重试");
    });
  },
  methods: {
@@ -191,31 +195,28 @@
          resolve(window.BMap);
          return;
        }
        
        window.initBMap = () => {
          console.log("百度地图API加载成功");
          // 确保BMap对象完全加载
          setTimeout(() => {
            if (window.BMap && window.BMap.Map) {
              resolve(window.BMap);
            } else {
              reject(new Error("百度地图API加载不完整"));
            }
          }, 100);
        };

        const script = document.createElement("script");
        script.type = "text/javascript";
        script.src =
          "https://api.map.baidu.com/api?v=3.0&ak=n5z5pKfAnaP3fYMR4RJOAQsR1wQ2avAn&callback=initBMap";
        script.onerror = reject;
        script.onerror = (error) => {
          console.error("百度地图API加载失败", error);
          reject(error);
        };
        document.head.appendChild(script);
        window.initBMap = () => {
          // 加载坐标转换库
          const convertorScript = document.createElement("script");
          convertorScript.type = "text/javascript";
          convertorScript.src =
            "https://api.map.baidu.com/getscript?v=3.0&ak=n5z5pKfAnaP3fYMR4RJOAQsR1wQ2avAn&services=&t=20230101100000";
          convertorScript.onload = () => {
            // 加载坐标转换工具
            const toolsScript = document.createElement("script");
            toolsScript.type = "text/javascript";
            toolsScript.src =
              "https://api.map.baidu.com/library/Convertor/1.4/src/Convertor_min.js";
            toolsScript.onload = () => {
              resolve(window.BMap);
            };
            document.head.appendChild(toolsScript);
          };
          document.head.appendChild(convertorScript);
        };
      });
    },
    /** 查询GPS列表 */
@@ -258,18 +259,55 @@
      const seconds = String(time.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    async translatePoints(points) {
      // 将WGS84坐标转换为百度坐标
      var translatePoints = [];
      return new Promise((resolve, reject) => {
    /** 初始化地图 */
    async initMap() {
      try {
        await this.loadBMapScript();
        // 确保DOM元素已经准备好
        await this.$nextTick();
        // 确保BMap对象存在
        if (!window.BMap || !window.BMap.Map) {
          throw new Error("百度地图API未正确加载");
        }
        // 创建地图实例
        this.map = new BMap.Map("mapContainer");
        // 设置地图中心点和缩放级别
        this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        // 启用滚轮放大缩小
        this.map.enableScrollWheelZoom();
        console.log("地图初始化成功");
        return true;
      } catch (error) {
        console.error("地图初始化失败", error);
        this.$message.error("地图加载失败，请刷新页面重试");
        return false;
      }
    },
    /** 坐标转换方法 */
    translatePoint(point) {
      return new Promise((resolve) => {
        // 使用百度地图API内置的坐标转换
        const convertor = new BMap.Convertor();
        convertor.translate(points, 1, 5, (data) => {
        const pointArr = [];
        pointArr.push(point);
        convertor.translate(pointArr, 1, 5, (data) => {
          if (data.status === 0) {
            translatePoints = data.points;
            resolve(translatePoints);
            resolve(data.points[0]);
          } else {
            // 如果转换失败，返回原始坐标
            resolve(point);
          }
        });
      });
    },
    /** 批量坐标转换 */
    async translatePoints(points) {
      const translatePoints = [];
      for (const point of points) {
        const translatedPoint = await this.translatePoint(point);
        translatePoints.push(translatedPoint);
      }
      return translatePoints;
    },
    /** 搜索按钮操作 */
    handleQuery() {
@@ -285,16 +323,6 @@
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 初始化地图 */
    initMap() {
      // 创建地图实例
      this.map = new BMap.Map("mapContainer");
      // 设置地图中心点和缩放级别
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      // 启用滚轮放大缩小
      this.map.enableScrollWheelZoom();
      console.log("initMap 初始化地图")
    },
     /** 计算两点之间的距离（米） */
     getDistance(point1, point2) {
        return this.map.getDistance(point1, point2);
@@ -305,11 +333,15 @@
        const dy = point2.lat - point1.lat;
        return Math.atan2(dy, dx) * 180 / Math.PI;
      },

   

    /** 绘制轨迹 */
    async drawTrack() {
      // 确保地图实例存在
      if (!this.map) {
        console.error("地图实例未初始化");
        return;
      }

      try {
      // 清除之前的轨迹
      if (this.polyline) {
        this.map.removeOverlay(this.polyline);
@@ -336,7 +368,7 @@
      );
      const currentSegment = this.gpsList.slice(startIndex, endIndex);

      //先获得所有坐标数组
        // 获取所有坐标数组
      const originPoints = currentSegment.map(
        (item) => new BMap.Point(item.longitude, item.latitude)
      );
@@ -346,13 +378,14 @@
      }).forEach(item => {
       item.speed=item.speed/1000;
      });

      //批量转换坐标
      var translatePoints = await this.translatePoints(originPoints);
        const translatePoints = await this.translatePoints(originPoints);

      // 创建轨迹点数组
      const points = translatePoints;
      translatePoints.forEach((item, index) => {
        const bdPoint = item;
        for (let index = 0; index < translatePoints.length; index++) {
          const bdPoint = translatePoints[index];

        // 判断起点和终点是否相同
        const isStartPoint = index === 0;
@@ -397,9 +430,10 @@
              rotation: direction,
            });
          }

          //在车图标上显示车牌
          const label = new BMap.Label(currentSegment[index].vehicleNo, {
            offset: new BMap.Size(0, -25), // 向上偏移25像素
              offset: new BMap.Size(0, -25),
            position: bdPoint,
          });
          label.setStyle({
@@ -415,6 +449,7 @@
          // 获取地址信息
          const geoc = new BMap.Geocoder();
          geoc.getLocation(bdPoint, (rs) => {
              if (rs && rs.addressComponents) {
            const addComp = rs.addressComponents;
            const address =
              addComp.province +
@@ -433,6 +468,7 @@
              );
              this.map.openInfoWindow(infoWindow, bdPoint);
            });
              }
          });

          this.map.addOverlay(marker);
@@ -453,7 +489,11 @@
          // 调整地图视野以显示完整轨迹
          this.map.setViewport(points);
        }
      });
        }
      } catch (error) {
        console.error("绘制轨迹失败", error);
        this.$message.error("绘制轨迹失败，请刷新页面重试");
      }
    },
    /** 点击表格行 */
    handleRowClick(row) {