【百度地圖API學習】一秒解決路徑規劃；距離時間；修改途經點圖標；修改起點 終點圖標（原創首發）

前言：網上關於百度地圖的API和技術博客不少，可是關於【自定義途經點】的技術博客少之又少，不少人爲了修改途經點只好放棄掉driving這個接口（這個接口能夠拿到路程距離和時間等很好用的數據，惋惜啊）

 

先上一個官方demo，點我

 

 

咱們能夠看到，途經點以waypoint數組的方式，在檢索的時候放入

 

功能是很強大，可是圖標很chou有沒有，徹底和咱們炫酷的UI不搭調啊，怎麼辦，果斷改！

1.起點和終點的修改

兩種方法，直接修改起點終點的marker屬性，詳細請點這裏

第二種方法是刪除起點和終點，再自定義一個覆蓋物marker到相同的座標出，詳情請點我

 

2.途經點圖標修改

下面進入正題！先看效果

 

終於和這十個兄弟說拜拜了對不對？下面說下個人思路

 

看下onMarkersSet這個回調函數返回的原型

 

 

 

 

因此，咱們只須要修改途經點對象下 Lm.Zc.innerHTML 的value就好啦，這裏我是將他改成display：none，再實例化我自定義的點放到對應座標系，你也能夠修改img的路徑，根據本身口味來，下面是個人代碼

    //自定義圖標
    var startIcon=new BMap.Icon("../../../images/h5/patrol/location.png", new BMap.Size(23,38));
    var endIcon=new BMap.Icon("../../../images/h5/patrol/location.png", new BMap.Size(23,38));
    var wayPointIconHtml='<div style="position: absolute; margin: 0px; padding: 0px; width: 36px; height: 40px; overflow: hidden;"><img src="http://api0.map.bdimg.com/images/way-points.png" style="display: none; border:none;margin-left:-11px; margin-top:-35px; "></div>'

 

var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: route,
            onMarkersSet:function(res) {    //標註點完成回調
                console.info(res);
                var myStart = new BMap.Marker(start,{icon:startIcon}); 
                map.removeOverlay(res[0].marker); //刪除起點
                map.addOverlay(myStart); 
                
                var myP1 = new BMap.Marker(p1,{icon:startIcon}); 
                console.log(res[1].Lm.Zc.innerHTML); //刪除途經點
                console.log(wayPointIconHtml);
                res[1].Lm.Zc.innerHTML=wayPointIconHtml;
                map.addOverlay(myP1); 
                
                var myEnd = new BMap.Marker(end,{icon:endIcon}); 
                map.removeOverlay(res[res.length-1].marker);//刪除終點
                map.addOverlay(myEnd); 
            }
        });
        driving.search(start,end,{waypoints:[p1]});