百度地图历史轨迹回放：从后台获取历史轨迹信息并在地图上画出轨迹路线

前一篇文章中也实现了百度地图历史轨迹回放，其方法是：从后台获取某时间段内的所有历史轨迹点，将第一个点作为轨迹的起始点，将最后一个点作为轨迹的终止点，然后从第一个点到最后一个点的所有途经点中，根据某规律选取10个途经点（因为百度地图JavaScript v2.0 api 规定途经点不能超过10个。但个人测试过，可以取到29个途经点来画出历史轨迹。当途经点为30个是，百度地图就画不出轨迹路线了。）。

确定了起始点、终止点、途经点之后，利用百度地图的DrivingRoute创建一个驾车实例，并在驾车实例中规定驾车策略policy为最短路径策略BMAP_DRIVING_POLICY_LEAST_DISTANCE（因为只有最短路径策略的路径规划是唯一的，而另外两个策略：最短时间BMAP_DRIVING_POLICY_LEAST_TIME、避开高速BMAP_DRIVING_POLICY_AVOID_HIGHWAYS的路径规划不是唯一的。）

例如：var myDriving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: false}, policy: BMAP_DRIVING_POLICY_LEAST_DISTANCE});

创建好驾车实例myDriving 后，利用驾车实例的search方法发起检索，即可在地图中检索出一条最短路径的轨迹路线。在用search方法检索时，将从后台获取到的起始点、终止点、途经点，作为参数传递给search方法即可。

例如：myDriving.search(trackPoints[0], trackPoints[trackPoints.length - 1], {waypoints: wayPoints});//waypoints表示途经点

利用设置途经点的方法虽然可以实现历史轨迹回放的效果，但是由于10个途经点并不能完全代表车辆实际走过的所有路径，所以依此方法规划出来的路径很多时候并不全面或并不准确。要想实现历史轨迹回放与真实车辆走过的路径完全一样，就需要把从后台获取的所有轨迹点都利用上，使画出的轨迹必须经过每一个途经点，这样才能保证轨迹的真实性。

下面给出另外一种方法，在下面这种方法中，当从后台获取到所有的历史轨迹点以后，会循环遍历每一个轨迹点，并将每两个点之间利用 DrivingRoute 规划出一条驾车路线，这样两两之间规划完以后，就可以完整呈现出车辆在实际环境中走过的路径了。具体代码如下所示：

每两个点之间规划路径也有一个问题：百度地图在两点之间规划路径时，会在地图中自动画出路径，并在路径的两端分别标出“起点”和“终点”的小图标，这样一来，当规划完整个历史轨迹时，整个地图上会出现好多“起点”和“终点”的小图标。

要解决这个问题，思路是，①当两两规划路径的起点等于从后台获取到的所有轨迹点的起点时，删除这对“起点”——“终点”中的“终点”；②当两两规划路径的终点等于从后台获取到的所有轨迹点的终点时，删除这对“起点”——“终点”中的“起点”；③当两两规划路径的起点不等于所有轨迹点的起点，且两两规划路径的终点不等于所有轨迹点的终点时，说明这对“起点”——“终点”都是途经点，此时删除这对“起点”——“终点”中的起点和终点。这样一来，当整个历史轨迹规划完以后，整条轨迹上就只剩下一个起点和一个终点了。

在DrivingRoute的第二个参数中，有一个属性为：onMarkersSet，这个属性的类型是一个方法。该属性标注添加完成后的回调函数，其参数为：pois，是一个数组，该数组是起始点和目的点数组，通过起始点和目的点（坐标点）的marker属性即可得到对应坐标点上的标注，这样就可以利用removeOverlay方法来删除对应的标注了。具体实现方法如下：

function showPath(startPoint, EndPoint){
	if (startPoint == trackPoints[0]) {
		var trackDriving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: false }, onMarkersSet:function(routes) {
				map.removeOverlay(routes[1].marker);//删除终点
			}
		});
	} else if (EndPoint == trackPoints[trackPoints.length - 1]) {
		var trackDriving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true }, onMarkersSet:function(routes) {
				map.removeOverlay(routes[0].marker); //删除起点
			}
		});
	} else {
		var trackDriving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: false}, onMarkersSet:function(routes) {
				map.removeOverlay(routes[0].marker); //删除起点
				map.removeOverlay(routes[1].marker);//删除终点
			}
		});
	}
	
	trackDriving.search(startPoint, EndPoint);
}

如此，就实现了利用百度地图的驾车导航来实现历史轨迹回放的功能了。效果图如下所示：