百度地图历史轨迹回放：起止点为坐标点，从后台获取10个途经点
2018-01-29 16:54
447 查看
利用百度地图 驾车线路规划 实现 运输车辆历史轨迹回放画线路 的功能。
运输车辆的历史轨迹即运输车辆在过去某段时间内走过的路线轨迹。首先得有时间段，即想要画出运输车辆在哪一段时间内的路线轨迹；其次得有在这段历史时间内运输车辆走过的所有轨迹点，这些轨迹点需要从后台获取，当然获取时得从前台把时间段传给后台。
根据业务需求，获取指定车辆的出发时间和停止时间，然后将这两个时间传递给后台，后台根据这两个时间点获取对应时间段的该指定车辆的走过的轨迹点。
后台将指定车辆在某个时间段内的轨迹点返回给前台，前台接收到这些轨迹点，依据百度地图的驾车线路规划，画出基于这些轨迹点的轨迹回放路线。
具体方法是：从后台获取某时间段内的所有历史轨迹点，将第一个点作为轨迹的起始点，将最后一个点作为轨迹的终止点，然后从第一个点到最后一个点的所有途经点中，根据某规律选取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个途经点并不能完全代表车辆实际走过的所有路径，所以依此方法规划出来的路径很多时候并不全面或并不准确。要想实现历史轨迹回放与真实车辆走过的路径完全一样，就需要把从后台获取的所有轨迹点都利用上，使画出的轨迹必须经过每一个途经点，这样才能保证轨迹的真实性。
<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>起止点为坐标点，从后台获取10个途经点</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) {
var trackLength = result.length;
for (var i = 0; i < trackLength; i++) {
var longitude = parseFloat(result[i].longitude);
var latitude = parseFloat(result[i].latitude);
trackPoints[i] = new BMap.Point(longitude, latitude);
}
wayPoints = trackPoints.slice(1, trackPoints.length-1);
var wayLength = wayPoints.length;
if (wayLength > 10) {
var tempArr = [];
var temp = Math.floor(wayLength / 10);
for (var j = 0; j < 10; j++) {
tempArr[j] = wayPoints[j + j * temp];
}
wayPoints = tempArr;
}
map.centerAndZoom(trackPoints[0], 14);
}
},
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);
}
</script>
具体效果如下图所示：
JavaScript API v2.0说明（http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a7b16）
此类用于获取驾车路线规划方案：DrivingRoute(location: Map | Point | String, opts: DrivingRouteOptions)
创建一个驾车导航实例，其中location表示检索区域，类型可为地图实例、坐标点或城市名称的字符串。
当参数为地图实例时，检索位置由地图当前的中心点确定；当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会在该城市内进行。
opts: DrivingRouteOptions————此类表示DrivingRoute构造函数的可选参数。
renderOptions：此类表示搜索结果呈现的配置。它没有构造函数，但可通过对象字面量形式表示。 map：展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。autoViewport：检索结束后是否自动调整地图视野。此属性对LocalCity无效。
policy：此枚举类型表示驾车方案的策略配置。BMAP_DRIVING_POLICY_LEAST_TIME：最少时间。 BMAP_DRIVING_POLICY_LEAST_DISTANCE：最短距离。 BMAP_DRIVING_POLICY_AVOID_HIGHWAYS：避开高速。
search(start: String | Point | LocalResultPoi, end: String | Point | LocalResultPoi, options: object)
发起检索。 start: 起点，参数可以是关键字、坐标点（自1.1版本支持）和LocalSearchPoi实例。
end: 终点，参数可以是关键字、坐标点（自1.1版本支持）或LocalSearchPoi实例。
option:{startCity:String,endCity:string,waypoints:array } startCity表示是驾车查询的起点城市，可以是城市名或者城市编码，endCity表示驾车查询的终点城市，可以是城市名或者城市编码,waypoints途经点集合，最多支持10个途经点，可以是名称也可以是坐标。
JavaScript API v3.0说明：（http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a7b22）
要想使用百度地图JavaScriptV3.0的接口，只需将<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
此类用于获取驾车路线规划方案：DrivingRoute(location:Map | Point | String, opts: DrivingRouteOptions)
创建一个驾车导航实例，其中location表示检索区域，类型可为地图实例、坐标点或城市名称的字符串。当参数为地图实例时，检索位置由地图当前的中心点确定；当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会在该城市内进行。
DrivingRouteOptions：此类表示DrivingRoute构造函数的可选参数。
renderOptions：此类表示搜索结果呈现的配置。它没有构造函数，但可通过对象字面量形式表示。
map：展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上
autoViewport：Boolean，检索结束后是否自动调整地图视野。此属性对LocalCity无效
policy：此枚举类型表示驾车方案的策略配置。
BMAP_DRIVING_POLICY_DEFAULT：默认。 BMAP_DRIVING_POLICY_FIRST_HIGHWAYS：优先高速。 BMAP_DRIVING_POLICY_AVOID_HIGHWAYS：避开高速。 BMAP_DRIVING_POLICY_AVOID_CONGESTION：避开拥堵。
search(start: Point | LocalResultPoi, end: Point | LocalResultPoi)————发起检索。
start: 起点，参数可以是坐标点和LocalSearchPoi实例。 end: 终点，参数可以是坐标点或LocalSearchPoi实例（未提到途经点个数限制）
运输车辆的历史轨迹即运输车辆在过去某段时间内走过的路线轨迹。首先得有时间段，即想要画出运输车辆在哪一段时间内的路线轨迹；其次得有在这段历史时间内运输车辆走过的所有轨迹点，这些轨迹点需要从后台获取，当然获取时得从前台把时间段传给后台。
根据业务需求，获取指定车辆的出发时间和停止时间，然后将这两个时间传递给后台，后台根据这两个时间点获取对应时间段的该指定车辆的走过的轨迹点。
后台将指定车辆在某个时间段内的轨迹点返回给前台，前台接收到这些轨迹点，依据百度地图的驾车线路规划，画出基于这些轨迹点的轨迹回放路线。
具体方法是：从后台获取某时间段内的所有历史轨迹点，将第一个点作为轨迹的起始点，将最后一个点作为轨迹的终止点，然后从第一个点到最后一个点的所有途经点中，根据某规律选取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个途经点并不能完全代表车辆实际走过的所有路径，所以依此方法规划出来的路径很多时候并不全面或并不准确。要想实现历史轨迹回放与真实车辆走过的路径完全一样，就需要把从后台获取的所有轨迹点都利用上，使画出的轨迹必须经过每一个途经点，这样才能保证轨迹的真实性。
<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>起止点为坐标点，从后台获取10个途经点</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) {
var trackLength = result.length;
for (var i = 0; i < trackLength; i++) {
var longitude = parseFloat(result[i].longitude);
var latitude = parseFloat(result[i].latitude);
trackPoints[i] = new BMap.Point(longitude, latitude);
}
wayPoints = trackPoints.slice(1, trackPoints.length-1);
var wayLength = wayPoints.length;
if (wayLength > 10) {
var tempArr = [];
var temp = Math.floor(wayLength / 10);
for (var j = 0; j < 10; j++) {
tempArr[j] = wayPoints[j + j * temp];
}
wayPoints = tempArr;
}
map.centerAndZoom(trackPoints[0], 14);
}
},
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);
}
</script>
具体效果如下图所示：
JavaScript API v2.0说明（http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a7b16）
此类用于获取驾车路线规划方案：DrivingRoute(location: Map | Point | String, opts: DrivingRouteOptions)
创建一个驾车导航实例，其中location表示检索区域，类型可为地图实例、坐标点或城市名称的字符串。
当参数为地图实例时，检索位置由地图当前的中心点确定；当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会在该城市内进行。
opts: DrivingRouteOptions————此类表示DrivingRoute构造函数的可选参数。
renderOptions：此类表示搜索结果呈现的配置。它没有构造函数，但可通过对象字面量形式表示。 map：展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上。autoViewport：检索结束后是否自动调整地图视野。此属性对LocalCity无效。
policy：此枚举类型表示驾车方案的策略配置。BMAP_DRIVING_POLICY_LEAST_TIME：最少时间。 BMAP_DRIVING_POLICY_LEAST_DISTANCE：最短距离。 BMAP_DRIVING_POLICY_AVOID_HIGHWAYS：避开高速。
search(start: String | Point | LocalResultPoi, end: String | Point | LocalResultPoi, options: object)
发起检索。 start: 起点，参数可以是关键字、坐标点（自1.1版本支持）和LocalSearchPoi实例。
end: 终点，参数可以是关键字、坐标点（自1.1版本支持）或LocalSearchPoi实例。
option:{startCity:String,endCity:string,waypoints:array } startCity表示是驾车查询的起点城市，可以是城市名或者城市编码，endCity表示驾车查询的终点城市，可以是城市名或者城市编码,waypoints途经点集合，最多支持10个途经点，可以是名称也可以是坐标。
JavaScript API v3.0说明：（http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a7b22）
要想使用百度地图JavaScriptV3.0的接口，只需将<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
此类用于获取驾车路线规划方案：DrivingRoute(location:Map | Point | String, opts: DrivingRouteOptions)
创建一个驾车导航实例，其中location表示检索区域，类型可为地图实例、坐标点或城市名称的字符串。当参数为地图实例时，检索位置由地图当前的中心点确定；当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会在该城市内进行。
DrivingRouteOptions：此类表示DrivingRoute构造函数的可选参数。
renderOptions：此类表示搜索结果呈现的配置。它没有构造函数，但可通过对象字面量形式表示。
map：展现结果的地图实例。当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上
autoViewport：Boolean，检索结束后是否自动调整地图视野。此属性对LocalCity无效
policy：此枚举类型表示驾车方案的策略配置。
BMAP_DRIVING_POLICY_DEFAULT：默认。 BMAP_DRIVING_POLICY_FIRST_HIGHWAYS：优先高速。 BMAP_DRIVING_POLICY_AVOID_HIGHWAYS：避开高速。 BMAP_DRIVING_POLICY_AVOID_CONGESTION：避开拥堵。
search(start: Point | LocalResultPoi, end: Point | LocalResultPoi)————发起检索。
start: 起点，参数可以是坐标点和LocalSearchPoi实例。 end: 终点，参数可以是坐标点或LocalSearchPoi实例（未提到途经点个数限制）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 百度地图历史轨迹回放：从后台获取历史轨迹信息并在地图上画出轨迹路线
- 百度地图从后台获取实时坐标点以实现车辆实时跟踪
- 获取百度地图路径下的关键坐标
- 百度地图显示历史轨迹时经纬度的处理方法
- android 百度地图轨迹回放
- 百度地图根据坐标获取地址信息
- 百度地图画出区域并获取区域坐标范围
- 百度地图的使用之获取数据库表中信息的坐标点显示在地图上
- 百度地图之jsonp获取位置坐标
- MapX历史轨迹回放[开发源代码]：
- Android开发——后台获取用户点击位置坐标（可获取用户支付宝密码）
- 百度地图 历史轨迹播放
- android 百度地图获取两个坐标的实际路线距离
- 百度地图 layer弹出地图 获取坐标
- javaweb实现在百度地图上的轨迹回放功能，action传入大量的参数到JSP的JavaScript中，实现绘制轨迹功能
- 历史轨迹回放源代码
- IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息
- asp.net 在后台给前台的控件设置Style属性与坐标，后台设置CSS样式，后台获取前台控件坐标
- 安卓实现在百度地图上播放历史轨迹
- 百度地图在Activity中以最简单的配置获取定位坐标字符串和经纬度