百度地图路线规划重新设置起点、终点图标和路线颜色

重新设置起点、终点图标:

var driving = new BMap.DrivingRoute(_this.mapModel, {
      renderOptions: {
          map: _this.mapModel,
          autoViewport: true
     }
});

//重新设置起始点,终点图标和偏移
var startIcon = new BMap.Icon(require('../assets/support/ic_qidian.png'), new BMap.Size(30,120),{anchor: new BMap.Size(10, 25),});
var endIcon = new BMap.Icon(require('../assets/support/ic_zhongdian.png'), new BMap.Size(30,120),{anchor: new BMap.Size(10, 25),});

_this.driving.setMarkersSetCallback(function(result){
       result[0].marker.setOffset(new BMap.Size(0, 40));
      result[0].marker.setIcon(startIcon);
      result[1].marker.setOffset(new BMap.Size(12, 45));
      result[1].marker.setIcon(endIcon);
})

重新设置路线颜色:

思路:渲染出路线规划;拿到路线规划的点;清除路线规划;根据点重新渲染出折线;

var driving = new BMap.DrivingRoute(_this.mapModel, {
      renderOptions: {
          map: _this.mapModel,
          autoViewport: true
     }
});

//重新设置路线颜色
_this.driving.setPolylinesSetCallback(function(result){
	   //清除路线规划
       _this.driving.clearResults();
              
      var points = [];
      result[0].Pq.map(function(item){
           points.push(new BMap.Point(item.lng,item.lat))
     })
    var polyline = new BMap.Polyline(points, {strokeColor:"#438EFF", strokeWeight:5, strokeOpacity:0.5});   //创建折线
    _this.mapModel.addOverlay(polyline);   //增加折线    
})

在这里插入图片描述

おすすめ

転載: blog.csdn.net/wsln_123456/article/details/101265605