最近在工作中遇到了一个百度地图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就可以了
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);
}
备注：本方法在加载轻量级的数据还是可以的，不会使浏览器崩溃，如果每次实时定位加载许多路径数据，成百上千的那种，在加载的时候浏览器中地图卡一下是正常现象。
如对本文有疑问， 点击进行留言回复！！
javascript从入门到跑路-----小文的js学习笔记（19）------- js的垃圾回收机制
Agora 开源 | 一个 Demo，帮你快速实现社交直播四大场景
网友评论