百度地图API四：实现轨迹动态回放功能

百度地图提供的接口很强大，开发者可以发挥自己的创造力做出来许多厉害的东西，只有想不到精彩。

本文记录 百度地图实现实现 轨迹回放的功能。  

所谓轨迹回放功能。 是指选择某个时间段，然后在地图上再现这个时间段内轨迹的出现情况。 什么时候出现了第几个轨迹点。隔几秒出现下一个轨迹 点。

数据准备:也就是一些坐标点。和它们对应的时间。

		//数据准备
		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"}
		];

初始界面，初始一张地图。然后我用了My97DatePicker来实现时间选择。

点击回放的时候执行。 原理是先从所有的坐标点中选取所有在时间范围内的点，然后根据坐标点的显示时间与我们选择的起始时间差设置 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();

		}

轨迹画法相关的addMarker(),addLine()见前面文章。

效果图

 输入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说明。  后期会陆续把代码演示放出来。 申请的空间还没备案。

演示地址：http://runningls.com/demos/baidumap/trackback.html

github：https://github.com/liusaint/baiduMap