最近項目需要實現路線的軌跡回放功能，苦於對百度api不熟，一時想不到用什么方法實現回放，看到了網上有人分享的一個很簡單例子，一下子清晰很多，總結了下，根據這個就可以實現很復雜的回放功能啦。
調用百度地圖API實現路線的軌跡回放功能其實很簡單，只要搞懂以下幾點即可：
1.需要用Polyline方法先繪制好路線圖
2.用Marker添加標注點
3.關鍵一步，通過結合定時器，使用Marker創建的標注點實例的setPosition改變標注點位置，實現播放功能
代碼分享，直接復制即可使用
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Track</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #controller{width:100%; border-bottom:3px outset; height:30px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:lightblue;} #container{height:100%} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=D2b4558ebed15e52558c6a766c35ee73"></script> <script type="text/javascript"> //獲取所有點的坐標 var points = [ new BMap.Point(114.00100, 22.550000), new BMap.Point(114.00130, 22.550000), new BMap.Point(114.00160, 22.550000), new BMap.Point(114.00200, 22.550000), new BMap.Point(114.00300, 22.550500), new BMap.Point(114.00400, 22.550000), new BMap.Point(114.00500, 22.550000), new BMap.Point(114.00505, 22.549800), new BMap.Point(114.00510, 22.550000), new BMap.Point(114.00515, 22.550000), new BMap.Point(114.00525, 22.550400), new BMap.Point(114.00537, 22.549500) ]; var map; //百度地圖對象 var car; //汽車圖標 var label; //信息標簽 var centerPoint; var timer; //定時器 var index = 0; //記錄播放到第幾個point var followChk, playBtn, pauseBtn, resetBtn; //幾個控制按鈕 function init() { followChk = document.getElementById("follow"); playBtn = document.getElementById("play"); pauseBtn = document.getElementById("pause"); resetBtn = document.getElementById("reset"); //初始化地圖,選取第一個點為起始點 map = new BMap.Map("container"); map.centerAndZoom(points[0], 15); map.enableScrollWheelZoom(); map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl({isOpen: true})); //通過DrivingRoute獲取一條路線的point var driving = new BMap.DrivingRoute(map); driving.search(new BMap.Point(114.00100, 22.550000), new BMap.Point(113.95100, 22.550000)); driving.setSearchCompleteCallback(function() { //得到路線上的所有point points = driving.getResults().getPlan(0).getRoute(0).getPath(); //畫面移動到起點和終點的中間 centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2); map.panTo(centerPoint); //連接所有點 map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1})); //顯示小車子 label = new BMap.Label("", {offset: new BMap.Size(-20, -20)}); car = new BMap.Marker(points[0]); car.setLabel(label); map.addOverlay(car); //點亮操作按鈕 playBtn.disabled = false; resetBtn.disabled = false; }); } function play() { playBtn.disabled = true; pauseBtn.disabled = false; var point = points[index]; if(index > 0) { map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1})); } label.setContent("經度: " + point.lng + "<br>緯度: " + point.lat); car.setPosition(point); index++; if(followChk.checked) { map.panTo(point); } if(index < points.length) { timer = window.setTimeout("play(" + index + ")", 200); } else { playBtn.disabled = true; pauseBtn.disabled = true; map.panTo(point); } } function pause() { playBtn.disabled = false; pauseBtn.disabled = true; if(timer) { window.clearTimeout(timer); } } function reset() { followChk.checked = false; playBtn.disabled = false; pauseBtn.disabled = true; if(timer) { window.clearTimeout(timer); } index = 0; car.setPosition(points[0]); map.panTo(centerPoint); } </script> </head> <body onload="init();"> <div id="controller" align="center"> <input id="follow" type="checkbox"><span style="font-size:12px;">畫面跟隨</span></input> <input id="play" type="button" value="播放" onclick="play();" disabled /> <input id="pause" type="button" value="暫停" onclick="pause();" disabled /> <input id="reset" type="button" value="重置" onclick="reset()" disabled /> </div> <div id="container"></div> </body> </html>