百度地图---多点连线问题

 一、百度地图多点连线

有一个需求，需要将业务员拜访时拜访的客户在地图上显示出来，并根据拜访时的定位信息来形成一条拜访轨迹

思路：1：将拜访时定位信息按照时间排序，根据点对象来形成标注

      2：将两个定位点之间连线，最后得到一条拜访轨迹

demo:

多个定位点连线：

     var polyline = new BMap.Polyline(

  linePoints,  --多个点对象集合

 {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});

map.addOverlay(polyline);

for(var i=0;I<mark.length;i++){

    marker = new BMap.Marker(new BMap.Point(mark[i].y,mark[i].x);

  if(i==0){//给标注添加标签

label = new BMap.Label("起点",{offset:new BMap.Size(20,-10)});

 }else if(i==length-1){

label = new BMap.Label("终点",{offset:new BMap.Size(20,-10)});

 }else{

label = new BMap.Label("途经点"+i,{offset:new BMap.Size(20,-10)});

 }

   marker.setLabel(label); //标签添加到标注上

   map.addOverlay(marker); //添加标注

  

   var content='这是第'+(i+1)+'个点';

   infoWindow = new BMap.InfoWindow(content); //给标注添加信息窗口

   marker.infoWindow = infoWindow;

   marker.addEventListener("click", function(e){  //标注添加点击事件

   this.openInfoWindow(e.target.infoWindow);

 });

}

由于在页面初始化时候的地图可能和路线所展示的地图不在同一个位置，所以在拿到数据后，取出第一个点坐标将其设置为地图的中心点

map.centerAndZoom(new BMap.Point(infor[0].deviationy,infor[0].deviationx),17);

然后调整地图展示路线最佳视野：map.setViewport(linePoints);  //调整路线到最佳视野

注意，如何在文字标注没有被方框包起来，可能是样式冲突了。添加下面的代码即可

label.setStyle({maxWidth:"none"});

界面实现效果：