百度地图API 路径规划 替换起始点及途经点图标

js

// 路径规划
drivingRouteLine() {
const driving = new BMapGL.DrivingRouteLine(this.map, {
          renderOptions: {
            map: this.map,
            autoViewport: true,
          },
        });
        // start/end 起点终点坐标 需要new BMapGL.point()转为 Point类型
        driving.search(start, end, {
          waypoints: wayArr, // 途经点坐标
        });
  
// 路径规划完成后 重置起始点&途经点图标
        driving.setMarkersSetCallback((result) => {
          this.clearOverLays();
          this.setSiteMarker(wayArr);
        });
}

清除地图覆盖物

    // 清除地图覆盖物
    clearOverLays() {
      const overLays = this.map.getOverlays();
      overLays.forEach((item, index) => {
        this.map.removeOverlay(item);
      });
    },

设置途经点和起点图标

// 设置途经点&起始点图标
    setSiteMarker(wayArr) {
      // 起始点图标
      const starIcon = new BMapGL.Icon(
        "site.png",
        new BMapGL.Size(40, 40)
      );
      // 途经点图标
      const transitPointIcon = new BMapGL.Icon(
        "transit-point.png",
        new BMapGL.Size(30, 30)
      );
    
      const markersPoint = [...wayArr];
      markersPoint.forEach((item, index) => {
        const marker = new BMapGL.Marker(item, {
          icon: index !== markersPoint.length - 1 ? transitPointIcon : starIcon,
        });
        this.map.addOverlay(marker);
      });
    },