【vue】vue中使用百度地图在页面加载完成或点击marker后获取距离

现在有这样两个需求：
1，使用百度地图，在页面加载完成后渲染出两个点之间的距离。
2，在点击marker后渲染出两个点之间的距离
vue中如何使用百度地图可以看这个：vue中使用百度地图

看到第一个需求的时候，首先第一反应想到的就是监听百度地图的加载完成事件，但实际操作之后发现自己想简单了。
获取距离需要调用百度地图的服务API，但是地图加载完成事件只是监听百度地图的加载完成，所以这时候是监听不到异步获取的距离的。

但问题总要解决啊，解决方法如下：

this.addrList是后端返回的list;
this.distList是保存获取到的所有距离的数组

methods: {
    // 初始化地图
    async initMap() {
      const BMapGL = await loadBaiDuDrawMap();
      this.map = new BMapGL.Map("container");
      const point = new BMapGL.Point(108.93996149471239, 34.2815544199147);
      this.map.centerAndZoom(point, 14);
      this.map.enableScrollWheelZoom(true);
	  // 获取距离
      this.getDistance(BMapGL);
    },
    
  // 获取距离
    getDistance(BMapGL) {
     // 当前位置
      const start = new BMapGL.Point(108.93996149471239, 34.2815544199147);
	 // 调用百度地图api 
      const transit = new BMapGL.DrivingRoute(this.map, {
        onSearchComplete: (res) => {
          const plan = res.getPlan(0);
          const distance = plan.getDistance(true);
		  // 将当前距离push进数组中
          this.distList.push(distance);
		  // 给列表中的每一项手动添加一个距离属性
          let idx = this.distList.length - 1;
          // 因为没有通过在data中声明,所以需要使用$set方法,来让distance属性成为响应式
          this.$set(this.addrList[idx], "distance", distance);
        },
      });
      
      this.addrList.forEach((ele) => {
        if (ele.serviceHallGps) {
          let latlng = ele.serviceHallGps.split(",");
		  // 获取终点，并计算距离
          const end = new BMapGL.Point(latlng[1], latlng[0]);
          transit.search(start, end);
        }
      });
    },
  }

第一个需求解决了，那第二个就简单多了，直接监听marker的点击事件就可以了，具体代码如下：

methods: {
    // 初始化地图
    async initMap() {
      const BMapGL = await loadBaiDuDrawMap();
      this.map = new BMapGL.Map("container");
      const point = new BMapGL.Point(108.93996149471239, 34.2815544199147);
      this.map.centerAndZoom(point, 14);
      this.map.enableScrollWheelZoom(true);
      // 创建marker点
      this.createMarker(BMapGL);	  
	  // 获取距离
      this.getDistance(BMapGL);
    },
    
  // 获取距离
    getDistance(BMapGL) {
     // 当前位置
      const start = new BMapGL.Point(108.93996149471239, 34.2815544199147);

	 // 调用百度地图api 
      const transit = new BMapGL.DrivingRoute(this.map, {
        onSearchComplete: (res) => {
          const plan = res.getPlan(0);
          const distance = plan.getDistance(true);
		  // 将当前距离push进数组中
          this.distList.push(distance);
        },
      });
 
      this.addrList.forEach((ele) => {
        if (ele.serviceHallGps) {
          let latlng = ele.serviceHallGps.split(",");

		  // 获取终点，并计算距离
          const end = new BMapGL.Point(latlng[1], latlng[0]);
          transit.search(start, end);
        }
      });
    },
    
	// 创建marker点标记
    createMarker(BMapGL) {
      const latlng = this.getLatlng();
      if (!latlng) return;

      latlng.forEach((ele, idx) => {
        const point = new BMapGL.Point(ele.lat, ele.lng);
        let marker = new BMapGL.Marker(point);

        this.map.addOverlay(marker);

        marker.addEventListener("click", () => {
          this.mkrCallback(idx);
        });
      });
    },
	// marker点击回调
    mkrCallback(idx) {
      this.distList.forEach((ele, idx) => {
        this.addrList[idx].distance = ele;
      });
    },
  }