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