使用百度地图API制作线路轨迹播放
1.使用百度地圖API制作軌跡播放；
可應用于車輛跟蹤、行駛線路回放、跑步行程的記錄等地圖應用場景，
1.1繪制靜態軌跡圖
獲取多個軌跡點point（必須包含經度、緯度）
使用polyline對象依次連接相鄰的2個點（注意polyline的個數比point的少1）
1.2繪制動態軌跡圖（固定間隔時間）
每隔500毫秒讀取一個軌跡點，實現a,b兩個功能
a增加一條polyline
b將marker從先前的point移到當前點
主方法使用setTimeout方法迭代來實現動態循環
Polyline在每條迭代循環體中添加即可，marker的移動則可以通過2中方法來實現：
一、使用removeOverlay除去原marker并在當前point處添加新marker
這是當時做項目時想到的方法，由于先前繪制polyline時使用addOverlay的思維慣性，在繪制marker時也就繼續使用了addOverlay做循環迭代。
window.run = function (){
?????? ?????? ?????? var pts ={?????}//你獲取到的一系列點的數組(通過gps或其他接口)
?????? ?????? ?????? var paths = pts.length;??? //獲得有幾個點
?????? ?????? ?????? var carMk = new BMap.Marker(pts[0],{icon:myIcon});
?????? ?????? ?????? map.addOverlay(carMk);
?????? ?????? ?????? i=0;
?????? ?????? ?????? function removeMkPoint(i){
?????? ?????? ?????? ?????? if(i < paths){//
?????? ?????? ?????? ?????? ?????? setTimeout(function(){
?????? ?????? ?????? ?????? ?????? ?????? i++;
map.removeOverlay(carMk);//清除前一個marker
?????? ?????? ?????? ?????? ?????? ?????? removeMkPoint(i);
?????? ?????? ?????? ?????? ?????? },100);
?????? ?????? ?????? ?????? }
?????? ?????? ?????? }
?????? ?????? ?????? setTimeout(function(){
?????? ?????? ?????? ?????? resetMkPoint(5);
?????? ?????? ?????? },100)
?
?????? ?????? });
?????? }
?
?????? setTimeout(function(){
?????? ?????? run();
?????? },1500);
二、使用marker的setPosition方法重新設置marker的位置
在項目完成后，我又讀了一篇百度api的文檔，發現官方demo中使用setPosition方法能很好地實現marker的移動功能
window.run = function (){
?????? ?????? ?????? var pts ={?????}//你獲取到的一系列點的數組(通過gps或其他接口)
?????? ?????? ?????? var paths = pts.length;??? //獲得有幾個點
?????? ?????? ?????? var carMk = new BMap.Marker(pts[0],{icon:myIcon});
?????? ?????? ?????? map.addOverlay(carMk);
?????? ?????? ?????? i=0;
?????? ?????? ?????? function resetMkPoint(i){
?????? ?????? ?????? ?????? carMk.setPosition(pts[i]);//重新設置marker的position
?????? ?????? ?????? ?????? if(i < paths){
?????? ?????? ?????? ?????? ?????? setTimeout(function(){
?????? ?????? ?????? ?????? ?????? ?????? i++;
?????? ?????? ?????? ?????? ?????? ?????? resetMkPoint(i);
?????? ?????? ?????? ?????? ?????? },100);
?????? ?????? ?????? ?????? }
?????? ?????? ?????? }
?????? ?????? ?????? setTimeout(function(){
?????? ?????? ?????? ?????? resetMkPoint(5);
?????? ?????? ?????? },100)
?
?????? ?????? });
?????? }
?
?????? setTimeout(function(){
?????? ?????? run();
?????? },1500);
注意：marker的opts屬性能自定義marker的icon（汽車、人等圖標）、旋轉方向、大小、偏移等等屬性，另外setAnimation方法還能設置動畫效果。
1.3繪制polyline
軌跡線路是由一個一個polyline首尾相連組合起來的，因此，只需要在每次添加marker時添加一個polyline即可，并且在下一輪迭代循環中不需要清除，每條polyline的首尾2個端點就是當前點和上一個時間段的點
????? var pts0，前一個點 var pts1當前點
??????????????????????? var carPl=new BMap.Polyline([pts0,pts1],{strokeColor:'blue',strokeWeight:4,strokeOpacity:0.8});
??????????????????????? map.addOverlay(carPl);
pts0=pts1;//每次添加polyline后當前點變為前一個點
?
?
1.4添加播放按鈕控件控制軌跡播放
添加自定義的播放控件，這里需要使用prototype屬性來返回對象類型原型的引用，??????? 這里給出prototype的理解
例如：A.prototype = new B();
理解prototype不應把它和繼承混淆。A的prototype為B的一個實例，可以理解A將B中的方法和屬性全部克隆了一遍。這里強調的是克隆而不是繼承，其區別在于：A的prototype是B的實例，同時B的prototype也可能是A的實例。
A能使用B的方法和屬性，當A、B中都有方法名為f的方法時，A的實例instance調用這個f方法(instance.f)會是A自生的f方法而不是B的f方法，如果A的實例instance想調用B的f方法，需要使用call方法來實現：先new一個B的實例var Binstance=new B(); Binstance.f.call(instance);
?
??????????? function PlayControl(){
??????????????? // 默認?？课恢煤推屏?/p>
??????????????? this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
??????????????? this.defaultOffset = new BMap.Size(10, 40);
??????????? }
??????????? // 通過JavaScript的prototype屬性繼承于BMap.Control
??????????? PlayControl.prototype = new BMap.Control();
??????????? // 自定義控件必須實現自己的initialize方法,并且將控件的DOM元素返回
??????????? // 在本方法中創建個input元素作為控件的容器,并將其添加到地圖容器中
??????????? PlayControl.prototype.initialize = function(map){
??????????????? // 創建一個DOM元素
??????????????? var input = document.createElement("input");
??????????????? input.id="playCtrl";
??????????????? input.type="image";
??????????????? input.src="image/play.png";
??????????????? input.οnclick=startPlay()；//startPlay為上一步開始執行setTimeout迭代
??????????????? };
??????????????? // 添加DOM元素到地圖中
??????????????? map.getContainer().appendChild(input);
??????????????? // 將DOM元素返回
??????????????? return input;
??????????? };
??????????? // 創建控件
??????????? var myPlayCtrl = new PlayControl();
??????????? // 添加到地圖當中
??????????? map.addControl(myPlayCtrl);
?
?
1.5將播放按鈕設計為可以單擊切換播放和停止的按鈕
?? 定義一個變量var i=0,在onclick事件觸發時，將i在0和1之間不停切換，根據i的值來判斷執行開始播放方法和停止方法。
?? 停止播放方法可以通過clearTimeout(timer)來實現（前提是在前面的開始播放方法中將setTimeout語句作為字符串賦值為timer），并使用removeOverlay來清除播放過程中出現的痕跡。
input.οnclick=function(){
??????????????????? if(i==0){
??????????????????????? startPlay();//播放開始
??????????????????????? input.src="image/pause.png";
??????????????????????? i=1;
??????????????????? }else{
????????????????????? ??pausePlay();//播放停止
??????????????????????? input.src="image/play.png";
??????????????????????? i=0;
??????????????????? }
?
??????????????? };
1.6添加播放速度控件
?? 上一步添加了播放開關，還可以在此基礎上添加播放速度的控件來調節播放的快慢
?? 其方法與1.4中添加播放開關的方法類似，其中input的type為range（html 5中新的類型），通過讀取range 的value，將value作為setTimeout的時間參數（作為參數傳入播放方法），
?
注意：當滑動range，value發生改變時，要使播放停止，再次點擊播放按鈕時，播放方法讀取新的value；
??????????????? input.id="speedCtrl";
??????????????? input.type="range";
??????????????? input.max="1750";
??????????????? input.min="250";
???????? ???????input.step="250";
??????????????? input.value="1000";
??????????????? var i=0;
??????????????? input.οnchange=function(){
??????????????????? pausePlay();
??????????????? }
總結：
作為一個從學校里剛走出來的非計算機專業的前端新手，實習中的第一次上手項目，就有獨立使用百度地圖API的機會實在幸運。從百度地圖API的具體使用實踐中，我學到了很多，除了百度地圖API以外，還學到了包括prototype、bootstrap（模態框、datetimepicker、validation等插件）等等。
盡管有些不太完善的地方（例如：在infoWindow的content中不能使用bootstrap的模態框等），但百度地圖API的功能仍然十分強大，值得廣大新手學習。特別是隨著移動互聯網的快速發展以及各種帶有gps定位功能的智能設備的爆發式普及，地圖、定位類使用場景越來越多，地圖API的使用需求也將越來越多。
為了更好地練習百度地圖，我打算利用節假日空閑的時間使用百度地圖制作一個小游戲練手，游戲大致構思如下：（未來會在博客中向大家展示！）
1.使用自定義marker作為游戲主角
2.使用自定義控件來操作主角
3.設置關卡或任務，
4.計算獎勵或得分
5.設置障礙
??? 先實現這幾個初級功能需求，就可以使自己的游戲主角在自己的城市中行走了！
?
轉載于:https://www.cnblogs.com/feleventh/p/4735361.html
總結
以上是生活随笔為你收集整理的使用百度地图API制作线路轨迹播放的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Fragment要点复习
- 下一篇： linux下的二进制文件的编辑和查看 -