web端百度地图API实现实时轨迹动态展现

web端百度地图API实现实时轨迹动态展现
最近在⼯作中遇到了⼀个百度地图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.length等。

覆盖物对象可以根据⾃⼰的需求⾃定义任何属性，取值的时候只需按这个字段取就可以了。

var polyline = new BMap.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 = new BMap.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 = new BMap.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 = new BMap.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);
}
备注：本⽅法在加载轻量级的数据还是可以的，不会使浏览器崩溃，如果每次实时定位加载许多路径数据，成百上千的那种，在加载的时候浏览器中地图卡⼀下是正常现象。