百度地圖js實現多點軌跡

查看官方api我們可以看到，driving的search方法最多可以設置10個途經點，但在大數據時代，這是遠遠不夠的，以下是我在本次開發中所用到的方法：

1.話不多說直接上代碼：多點間直線的畫法沒什么多說的

var addLine = function(arr){
map.clearOverlays();
var linePoints = arr;
polyline = new BMap.Polyline(linePoints, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);
setTimeout(function(){
map.setViewport(arr);
},1000);
}

其中arr為自定義數組。

2.多點行車軌跡的畫法：

2.1：

var addMoreLine = function(arr) {
var driving = new BMap.DrivingRoute(map,
{onSearchComplete: function(results){
if (driving.getStatus() == BMAP_STATUS_SUCCESS){
var plan = driving.getResults().getPlan(0);
var num = plan.getNumRoutes();
for(var j =0;j<num ;j++){
var pts= plan.getRoute(j).getPath();
var polyline = new BMap.Polyline(pts);
polyline.setStrokeColor("blue");
polyline.setStrokeStyle("dashed");
map.addOverlay(polyline);
}

var m1 = new BMap.Marker(myP1);
var m2 = new BMap.Marker(myP2);
var lab1 = new BMap.Label("起點",{position:myP1});
var lab2 = new BMap.Label("終點",{position:myP2});

map.addOverlay(m1);
map.addOverlay(m2);
map.addOverlay(lab1);
map.addOverlay(lab2);
}
}},{renderOptions:{map: map, autoViewport: true}});
for (var i = 0; i < arr.length; i++){
driving.search(arr[i],arr[i+1]);
}
setTimeout(function(){
map.setViewport(arr);
},1000);//使涉及到的點都出現在視野

}

這種寫法search的參數中沒有途經點，在其回調函數中對search的結果進行畫線操作（測試數據1000條）說實話，反應有點慢！！！！

2.2

var drivingLine = function(myP1,myp2,arr1){
var ptsArr = [];
map.clearOverlays();//清除地圖上的覆蓋物
var driving = new BMap.DrivingRoute(map,
{onSearchComplete: function(results){
if (driving.getStatus() == BMAP_STATUS_SUCCESS){
var plan = driving.getResults().getPlan(0);
var num = plan.getNumRoutes();
for(var j =0;j<num ;j++){
var pts= plan.getRoute(j).getPath();
var polyline = new BMap.Polyline(pts);
ptsArr = ptsArr.concat(polyline);
polyline.setStrokeColor("blue");
polyline.setStrokeStyle("dashed");
map.addOverlay(polyline);
}

var m1 = new BMap.Marker(myP1);
var m2 = new BMap.Marker(myP2);
var lab1 = new BMap.Label("起點",{position:myP1});
var lab2 = new BMap.Label("終點",{position:myP2});

map.addOverlay(m1);
map.addOverlay(m2);
map.addOverlay(lab1);
map.addOverlay(lab2);
}
}},{renderOptions:{map: map, autoViewport: true}});
var group = Math.floor( arr1.length / 10 ) ;
var mode = arr1.length % 10 ;
if(mode != 0){
var waypoints = arr1.slice(group*10,arr1.length-1);
driving.search(arr1[group*10],arr1[arr1.length-1],{waypoints:waypoints});
}

for(var i =0;i<group;i++){
var waypoints = arr1.slice(i*10+1,(i+1)*10);
driving.search(arr1[i*10], arr1[(i+1)*10],{waypoints:waypoints});
}
setTimeout(function(){
map.setViewport(arr1);
},1000);
}

這種方式是將目標數組轉化為十個一組的數據，將0和10的數組元素作為起點和終點，中間點為途經點.（測試數據量1000，與2.1相比，慢）.

3 遇到的問題：

由於web端界面的效果要求，需要將所有數據點都檢索完成后再進行畫線操作，但並沒有找到相應的解決辦法，我個人感覺如果要使界面效果看起來流暢，可以在進行search之前將所有的數據點都顯示在可是區域內，采用的方法就是：

setTimeout(function(){
map.setViewport(arr1);
},1000);