javascript

百度地圖路線規劃重新設定起點、終點圖示和路線顏色


重新設定起點、終點圖示:

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);   //增加折線    
})

在這裡插入圖片描述

本文章已修改原文用詞符合繁體字使用者習慣使其容易閱讀

版權宣告:此處為CSDN博主「花鐺」的原創文章,依據CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本宣告。

原文連結:https://blog.csdn.net/wsln_123456/article/details/101265605

No tags for this post.