百度地圖提供的介面很強大，開發者可以發揮自己的創造力做出來許多厲害的東西，只有想不到精彩。

本文記錄 百度地圖實現實現 軌跡回放的功能。  

所謂軌跡回放功能。 是指選擇某個時間段，然後在地圖上再現這個時間段內軌跡的出現情況。 什麼時候出現了第幾個軌跡點。隔幾秒出現下一個軌跡 點。

資料準備:也就是一些座標點。和它們對應的時間。

		//資料準備
		var points = [
		{"lng":116,"lat":40,"id":8,"time":"2015-11-25 14:00:01"},
		{"lng":117,"lat":31,"id":2,"time":"2015-11-25 14:00:11"},
		{"lng":116,"lat":34,"id":3,"time":"2015-11-25 14:00:22"},
		{"lng":118,"lat":39,"id":4,"time":"2015-11-25 14:00:15"},
		{"lng":110,"lat":35,"id":5,"time":"2015-11-25 14:00:05"},
		{"lng":119,"lat":43,"id":5,"time":"2015-11-24 14:00:05"},
		{"lng":108,"lat":31,"id":5,"time":"2015-11-24 14:00:15"},
		{"lng":112,"lat":35,"id":5,"time":"2015-11-24 14:00:17"}
		];
 

點選回放的時候執行。 原理是先從所有的座標點中選取所有在時間範圍內的點，然後根據座標點的顯示時間與我們選擇的起始時間差設定 timeout的執行時間。就

可以還原某個時間段內軌跡 生成的情況了。核心程式碼：

		function loadTrackByTime(){
			//清除當前所有的定時器和地圖上的覆蓋物。
			map.clearOverlays();
			for (var t = 0; t < timerArr.length; t++) {
				clearTimeout(timerArr[t]);
			};
			timerArr = [];
			clearInterval(interval);
			bPoints.length = 0;
			donePoints.length = 0;

			var dateBegin = document.getElementById('datepicker1').value;
			var dateEnd = document.getElementById('datepicker2').value;

			//從原始陣列中查詢符合條件的座標點。
			var pointsLen = points.length;
			var searchRes = [];//用來裝符合條件的座標資訊。

			//滿足條件的放上去。
			for (var i = 0; i < pointsLen; i++) {
				if(dateDiff(points[i].time,dateBegin)>0&&dateDiff(points[i].time,dateEnd)<0){
					searchRes.push(points[i]);
				}
			};

			trackTime(dateBegin);

			for (var j = 0; j < searchRes.length; j++) {
				var wait = dateDiff(searchRes[j].time,dateBegin)*1000;//等待時間。	

				(function() {

					var pointAg = [searchRes[j]],timer;//閉包
					timer = setTimeout(function(){

						var doneLen = donePoints.length;
						var linePoints = [];

						if(doneLen!=0){				
							linePoints.push(donePoints[doneLen-1]);
						}
						linePoints.push(pointAg[0]);
						donePoints.push(pointAg[0]);
						addLine(linePoints); //把原始資料的軌跡線新增到地圖上。
						
						addMarker(pointAg); 

						bPoints.push(new BMap.Point(pointAg[0].lng,pointAg[0].lat));
						setZoom(bPoints); 

					},wait);
					timerArr.push(timer);
				})();

			};

		}
 

		//求時間差的方法
		function dateDiff(date1, date2){ 
			var type1 = typeof date1, type2 = typeof date2; 
			if(type1 == 'string') 
				date1 = stringToTime(date1); 
			else if(date1.getTime) 
				date1 = date1.getTime(); 
			if(type2 == 'string') 
				date2 = stringToTime(date2); 
			else if(date2.getTime) 
				date2 = date2.getTime(); 
		    return (date1 - date2) / 1000;//結果是秒 
		}

		//字串轉成Time(dateDiff)所需方法 
		function stringToTime(string){ 
			var f = string.split(' ', 2); 
			var d = (f[0] ? f[0] : '').split('-', 3); 
			var t = (f[1] ? f[1] : '').split(':', 3); 
			return (new Date( 
				parseInt(d[0], 10) || null, 
				(parseInt(d[1], 10) || 1)-1, 
				parseInt(d[2], 10) || null, 
				parseInt(t[0], 10) || null, 
				parseInt(t[1], 10) || null, 
				parseInt(t[2], 10) || null 
				)).getTime();

		}
 

效果圖

 輸入2015-11-25 14:00:00   2015-11-25 16:00:00，軌跡點和軌跡線依次出現在地圖上。

 輸入2015-11-24 14:00:00   2015-11-24 16:00:00

適用範圍：  適用於那些知道哪個時間段有軌跡點的情況。

優化意見：

1.在旁邊增加一個計時器，可以看到時間具體是走到哪一秒。 可以更直觀地看到軌跡點出現的時間。

2.如果選擇時間點距離第一個距離太長，可以把選擇的初始時間改變到第一個軌跡點的時間。

3.如果所選時間範圍內沒有軌跡點。或軌跡點很少，時間間隔很大可提示。

4.軌跡回放加速功能。    

當然，這些功能，我都沒有做。。。 不過也不難。 軌跡回放加速功能。 只要控制setTimeout的間隔時間就可以了。 比如兩倍速度，那就讓wait間隔時間除以2就可以。 可以稍微修改一下上面的核心函式，增加一個速度引數傳遞。

百度地圖API系列暫時寫到這裡，我也是用到什麼功能就是看API說明。  後期會陸續把程式碼演示放出來。 申請的空間還沒備案。