百度地圖之修改起點和終點的icon

修改起點和終點的icon圖標是有區別的，區別在於你有沒有途經點，如果你的項目中只有起點和終點的話，那么你可以用第一種方法，如果有途經點的話，那么就要用第二種方法，當然第二種方法也可用於沒有途徑點的情況下，這個就是隨君喜歡了；

1.在沒有途徑點的情況下修改起點和終點的icon

代碼展示：

var map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

map.enableScrollWheelZoom(true);

 

var p1 = new BMap.Point(116.301934,39.977552);

var p2 = new BMap.Point(116.508328,39.919141);

 

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

driving.search(p1, p2);//waypoints表示途經點

var startIcon=new BMap.Icon(".. /img/startIcon.png", new BMap.Size(40,50));

var endIcon = new BMap.Icon(".. /img/endIcon.png", new BMap.Size(40,50));

  driving.setMarkersSetCallback(function(result){

  result[0].marker.setIcon(startIcon);

  result[1].marker.setIcon(endIcon);

  })

 

2.在有途徑點的情況下修改icon。如果把上面的方法用在有途經點的情況下的話，那么你的地圖上的就會報出如下錯誤：

 所以解決方法是：

var map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

map.enableScrollWheelZoom(true);

 

var p1 = new BMap.Point(116.301934,39.977552);

var p2 = new BMap.Point(116.508328,39.919141);

 

var myIcon = new BMap.Icon(".. /img/startIcon.png", new BMap.Size(40,50));

var marker2 = new BMap.Marker(p1,{icon:myIcon});  // 創建標注

map.addOverlay(marker2);

var myIcon1 = new BMap.Icon(".. /img/endIcon.png", new BMap.Size(40,50));

var marker3 = new BMap.Marker(p2,{icon:myIcon1});  // 創建標注

map.addOverlay(marker3);

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

            onPolylinesSet:function(routes) {

                searchRoute = routes[0].getPolyline();//導航路線

                map.addOverlay(searchRoute);

            },

            onMarkersSet:function(routes) {           

            map.removeOverlay(routes[0].marker); //刪除起點

               map.removeOverlay(routes[routes.length-1].marker); //刪除終點

            }

        });

        driving.setSearchCompleteCallback(function(){

         var plan = driving.getResults().getPlan(0);

    

        })

        driving.search(p1, p2,{waypoints:["北京科技大學","北京國際會議中心"]});//waypoints表示途經點

效果展示：