百度地图历史轨迹回放：从后台获取历史轨迹信息并在地图上画出轨迹路线
前一篇文章中也实现了百度地图历史轨迹回放，其方法是：从后台获取某时间段内的所有历史轨迹点，将第一个点作为轨迹的起始点，将最后一个点作为轨迹的终止点，然后从第一个点到最后一个点的所有途经点中，根据某规律选取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 规划出一条驾车路线，这样两两之间规划完以后，就可以完整呈现出车辆在实际环境中走过的路径了。具体代码如下所示：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
#allmap{height:500px;width:100%;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的**"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>根据起终点经纬度并添加途经点设置驾车导航</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
//初始化地图
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
/***** 获取需要画的历史轨迹的起止时间点 ******/
var startTime; //历史轨迹的起始时间点
var endTime; //历史轨迹的终止时间点
//根据捆包号获取轨迹起始时间
$.ajax({
type : "GET",
async : false,
url : "***?捆包号=" + 捆包号,
success : function(result){
startTime = result; //返回数据格式类似于：20171124223335
}
});
//获取系统当前时间作为轨迹终止时间。 返回数据格式类似于：20180129152500
endTime = dateToString(new Date());
function dateToString(now){
var year = now.getFullYear();
var month =(now.getMonth() + 1).toString();
var day = (now.getDate()).toString();
var hour = (now.getHours()).toString();
var minute = (now.getMinutes()).toString();
var second = (now.getSeconds()).toString();
if (month.length == 1) {
month = "0" + month;
}
if (day.length == 1) {
day = "0" + day;
}
if (hour.length == 1) {
hour = "0" + hour;
}
if (minute.length == 1) {
minute = "0" + minute;
}
if (second.length == 1) {
second = "0" + second;
}
var dateTime = year + month + day + hour + minute + second;
return dateTime;
}
var trackPoints = []; //用来存放从后台获取到的所有历史轨迹点的数据
//获取历史轨迹数据
$.ajax({
async:false,
cache:true,
url: "获取历史轨迹点的接口?捆包号="+捆包号+"&轨迹开始时间点="+startTime+"&轨迹结束时间点="+endTime,
type: 'GET',
dataType:"json",
success: function(result){
if (result != undefined && result.length > 0) {
for (var i = 0, j = 0; i < result.length; i++) {
var longitude = parseFloat(result[i].longitude);
var latitude = parseFloat(result[i].latitude);
trackPoints[i] = new BMap.Point(longitude, latitude); //处于开始时间点和结束时间点内的所有历史轨迹点信息
//for循环把每两个点的路线画出来
for (var i = 0; i < trackPoints.length-1; i++) {
var startPoint = trackPoints[i];
var endPoint = trackPoints[i + 1];
showPath(startPoint, endPoint);
}
}
map.panTo(trackPoints[0]);
}
},
error:function(e){
mizhu.toast("获取历史轨迹失败");
}
});
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);
/* trackDriving.setSearchCompleteCallback(function (rs) {
var pts = trackDriving.getResults().getPlan(0).getRoute(0).getPath();
map.addOverlay(new BMap.Polyline(pts, { strokeColor: "black", strokeWeight: 5, strokeOpacity: 0.5}));
}); */
}
</script>要解决这个问题，思路是，①当两两规划路径的起点等于从后台获取到的所有轨迹点的起点时，删除这对“起点”——“终点”中的“终点”；②当两两规划路径的终点等于从后台获取到的所有轨迹点的终点时，删除这对“起点”——“终点”中的“起点”；③当两两规划路径的起点不等于所有轨迹点的起点，且两两规划路径的终点不等于所有轨迹点的终点时，说明这对“起点”——“终点”都是途经点，此时删除这对“起点”——“终点”中的起点和终点。这样一来，当整个历史轨迹规划完以后，整条轨迹上就只剩下一个起点和一个终点了。
在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);
}如此，就实现了利用百度地图的驾车导航来实现历史轨迹回放的功能了。效果图如下所示：