百度地圖API三：實時軌跡動態展現
阿新 • • 發佈：2019-01-23
上一個文章講了如何根據標註點座標範圍計算顯示縮放級別zoom自適應顯示地圖。
本文講實時動態軌跡的實現。
先在上面畫一些初始的標註點和軌跡線。然後再動態生成一些點。
然後我們隨機生成新的軌跡點並顯示軌跡到地圖上。 因為是示例demo，所以用的隨機生成。
真實案例中應該是用ajax從後臺獲取新的點資料過來。
隨著軌跡的生長，地圖會自己調整可視範圍。調節中心點和地圖級別。
我們要儲存當前軌跡的最後一個點 為新增軌跡的起點。而保證軌跡的連續。
其實就是在百度地圖上畫標註點和線條。來呈現軌跡。 也可以在起點和終點用不同的標註點標記一下。
程式碼：
addLine()程式碼：
隨機生成新的軌跡點，動態新增到百度地圖上。dynamicLine() 實際情況下這個函式應該是傳引數。points。 這個points是一個數組。傳參就可以直接新增新的軌跡到地圖上。 繪製新的點並調節地圖顯示。
獲取隨機數：
初始效果圖：
過幾秒之後的效果圖：
模擬資料看起來不是很精彩啊。 下一篇文章我們講 百度地度軌跡回放功能。
//資料準備, var points = [];//原始點資訊陣列 var bPoints = [];//百度化座標陣列。用於更新顯示範圍。 //地圖操作開始 var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(103.388611,35.563611), 5); //初始顯示中國。 map.enableScrollWheelZoom();//滾輪放大縮小 setTimeout(dynamicLine, 1000);//動態生成新的點。
addLine()程式碼：
//新增線 function addLine(points){ var linePoints = [],pointsLen = points.length,i,polyline; if(pointsLen == 0){ return; } // 建立標註物件並新增到地圖 for(i = 0;i <pointsLen;i++){ linePoints.push(new BMap.Point(points[i].lng,points[i].lat)); } polyline = new BMap.Polyline(linePoints, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5}); //建立折線 map.addOverlay(polyline); //增加折線 }
隨機生成新的軌跡點，動態新增到百度地圖上。dynamicLine() 實際情況下這個函式應該是傳引數。points。 這個points是一個數組。傳參就可以直接新增新的軌跡到地圖上。 繪製新的點並調節地圖顯示。
//隨機生成新的點，加入到軌跡中。 function dynamicLine(){ var lng = 100+getRandom(40); var lat = 35+getRandom(30); var id = getRandom(1000); var point = {"lng":lng,"lat":lat,"status":1,"id":id} var makerPoints = []; var newLinePoints = []; var len; makerPoints.push(point); addMarker(makerPoints);//增加對應該的軌跡點 points.push(point); bPoints.push(new BMap.Point(lng,lat)); len = points.length; newLinePoints = points.slice(len-2, len);//最後兩個點用來畫線。 addLine(newLinePoints);//增加軌跡線 setZoom(bPoints); setTimeout(dynamicLine, 1000); }
獲取隨機數：
// 獲取隨機數
function getRandom(n){
return Math.floor(Math.random()*n+1)
} //根據點資訊實時更新地圖顯示範圍，讓軌跡完整顯示。設定新的中心點和顯示級別
function setZoom(bPoints){
var view = map.getViewport(eval(bPoints));
var mapZoom = view.zoom;
var centerPoint = view.center;
map.centerAndZoom(centerPoint,mapZoom);
}初始效果圖：
過幾秒之後的效果圖：
模擬資料看起來不是很精彩啊。 下一篇文章我們講 百度地度軌跡回放功能。