百度地图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);