最近在工做中遇到了一個百度地圖api中的難題,恐怕有的程序員可能也遇到過。就是實時定位並顯示軌跡,網上大部分都是經過建立polyline對象貼到地圖上。固然,百度地圖的畫線就是這樣實現的,可是好多人會發現,若是數據量超過四五千的話,瀏覽器可能就要卡了,後面可能就直接由於瀏覽器內存不足直接崩潰。按理講面對這麼少的數據,百度地圖確定會考慮到這一點,因此確定有解決的方法。下面將介紹本人的方法供你們參考:html
一、數據準備程序員
這方便的數據我是ajax請求從後臺獲取的就不說了。畫線的話咱們就得用到百度地圖api中的polyline類了,由於咱們是實時定位,之前的歷史路徑是存在,可是咱們不能每次都要new一個polyline對象貼到地圖上,因此就須要用到polyline的setPath(path: Array<Point>),咱們把整條路徑的數據所有塞進去就能夠了。這裏我用一個json格式的數組保存每一個歷史路徑的全部路徑數據,後面就是來數據更新數組再找到地圖上相應的polyline對象塞進去就能夠了。ajax
var polylineArray = [];//此數組專門存儲歷史路徑 var PolylineJson = {}; PolylineJson["Id"] = Id;//存儲相應的polyline對象 PolylineJson ["PathArray"] = polylineArray ; polylineArray.push(PolylineJson);
備註:Polyline是個覆蓋物對象,能夠和其餘對象同樣自定義屬性的,好比在聲明之後設置polyline的id屬性直接用polyline.id=content就能夠了json
var polyline = new BMap.Polyline([ startPoint, endPoint ], { strokeColor : color, strokeWeight : weight, strokeOpacity : opacity, strokeStyle : style // 實線solid或虛線dashed }); polyline.id = Id; map.addOverlay(polyline);
二、路徑更新api
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); }
備註:本方法在加載輕量級的數據仍是能夠的,不會使瀏覽器崩潰,若是每次實時定位加載許多路徑數據,成百上千的那種,在加載的時候瀏覽器中地圖卡一下是正常現象。數組