最近在工作中遇到了一个百度地图api中的难题，恐怕有的程序员可能也遇到过。就是实时定位并显示轨迹，网上大部分都是通过创建polyline对象贴到地图上。当然，百度地图的画线就是这样实现的，但是好多人会发现，如果数据量超过四五千的话，浏览器可能就要卡了，后面可能就直接因为浏览器内存不足直接崩溃。按理讲面对这么少的数据，百度地图肯定会考虑到这一点，所以肯定有解决的方法。下面将介绍本人的方法供大家参考：

1、数据准备

这方便的数据我是ajax请求从后台获取的就不说了。画线的话我们就得用到百度地图api中的polyline类了，因为我们是实时定位，以前的历史路径是存在，但是我们不能每次都要new一个polyline对象贴到地图上，所以就需要用到polyline的setPath(path: Array)，我们把整条路径的数据全部塞进去就可以了。这里我用一个json格式的数组保存每个历史路径的所有路径数据，后面就是来数据更新数组再找到地图上相应的polyline对象塞进去就可以了。

var polylineArray = [];//此数组专门存储历史路径

var PolylineJson ={};

PolylineJson["Id"] = Id;//存储相应的polyline对象

PolylineJson ["PathArray"] =polylineArray ;

polylineArray.push(PolylineJson);

备注：Polyline是个覆盖物对象，可以和其他对象一样自定义属性的，比如在声明以后设置polyline的id属性直接用polyline.id=content就可以了。再例如：polyline.name 或 polyline.length等。覆盖物对象可以根据自己的需求自定义任何属性，取值的时候只需按这个字段取就可以了。

var polyline = newBMap.Polyline([ startPoint, endPoint ], {

strokeColor : color,

strokeWeight : weight,

strokeOpacity : opacity,

strokeStyle : style//实线solid或虚线dashed

});

polyline.id=Id;

map.addOverlay(polyline);

2、路径更新

if(PolylineArray != ""){for(var i = 0; i < PolylineArray.length; i++){if(PolylineArray[i].Id == Id){//此条路径存在

var PathArray =PolylineArray[i].PathArray;

PathArray.push(endPoint);//更新数组中的数据

var allOverlay = map.getOverlays();//获取地图上的覆盖物

for (var j = 0; j < allOverlay.length; j++) {//判断标注物是否是Polyline类型

if (allOverlay[j].toString() == "[object Polyline]") {if (allOverlay[j].id ==Id) {

allOverlay[j].setPath(PathArray);break;

}else{//数组中存在，但地图上不存在

if(j == allOverlay.length - 1){var polylineTemp = newBMap.Polyline(PathArray, {

strokeColor : color,

strokeWeight : weight,

strokeOpacity : opacity,

strokeStyle : style//实线solid或虚线dashed

});

polylineTemp.id= Id;//为这条路径赋值唯一的id

map.addOverlay(polylineTemp); //添加折线到地图上

}

}

}

}break;

}else{//不存在

if(i == PolylineArray.length - 1){var PathArray =[];

PathArray.push(startPoint);

PathArray.push(endPoint);var polylineTemp = newBMap.Polyline(PathArray, {

strokeColor : color,

strokeWeight : weight,

strokeOpacity : opacity,

strokeStyle : style//实线solid或虚线dashed

});

polylineTemp.id= Id;//为这条路径赋值唯一的id

map.addOverlay(polylineTemp); //添加折线到地图上

var PolylineJson ={};

PolylineJson["Id"] =Id;

PolylineJson["PathArray"] =PathArray;

PolylineArray.push(Polyline);break;

}

}

}

}else{//数组为空

var PathArray =[];

PathArray.push(startPoint);

PathArray.push(endPoint);var polylineTemp = newBMap.Polyline(PathArray, {

strokeColor : color,

strokeWeight : weight,

strokeOpacity : opacity,

strokeStyle : style//实线solid或虚线dashed

});

polylineTemp.id= Id;//为这条路径赋值唯一的id

map.addOverlay(polylineTemp); //添加折线到地图上

var PolylineJson ={};

PolylineJson["Id"] =Id;

PolylineJson["PathArray"] =PathArray;

PolylineArray.push(Polyline);

}

备注：本方法在加载轻量级的数据还是可以的，不会使浏览器崩溃，如果每次实时定位加载许多路径数据，成百上千的那种，在加载的时候浏览器中地图卡一下是正常现象。