百度地图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的执行时间。就

可以还原某个时间段内轨迹 生成的情况了。核心代码：

var timerArr=[];
		function loadTrackByTime(){

			map.clearOverlays();
			newPoints = [];
			//再次点击的时候清除定时器。
			for (var t = 0; t < timerArr.length; t++) {
				clearTimeout(timerArr[t]);
			};
			timerArr = [];

			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]);
				}
			};

			
			var pointsArr;
			//设置在多少时间之后将这个轨迹点和轨迹画到地图上。
			for (var j = 0; j < searchRes.length; j++) {
				//每个点的等待时间
				var wait = dateDiff(searchRes[j].time,dateBegin)*1000;				
				pointsArr = [];
				pointsArr.push(searchRes[j]);

				//使用闭包、立即执行函数保存定时器所需要的变量。
				(function() {
					var pointAg = pointsArr;
					var linePoints = newPoints;
					timerArr.push(setTimeout(function(){
						addMarker(pointAg); 
						newPoints.push(new BMap.Point(pointAg[0].lng,pointAg[0].lat));
						addLine(newPoints); //把原始数据的轨迹线添加到地图上。 
					},wait));
				})();

			};

		}

求时间差的代码：

//求时间差的方法
		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