百度地图的多条行驶轨迹，增加暂停的播放的按钮，并显示是那一条行驶的轨迹
1、代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多条动态行驶轨迹，增加播放和暂停按钮</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wIt2mDCMGWRIi2pioR8GZnfrhSKQHzLY"></script>
<script src="lodash.js"></script>
<script src="GPSTransition.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button id="play" style="color:red">播放</button>
<button id="pause" style="color:gray">暂停</button>
<button id="clear">清空</button>
<div id="ifTable">
<div>
第一条路径
<input type="text" hidden value="LNBSCB3F2FD11327120190327091134" title="隐藏保存rowKey,模拟vue中的v-for渲染事件">
</div>
<div>
第二条路径
<input type="text" hidden value="LNBSCB3F2FD11327120190327103555" title="隐藏保存rowKey,模拟vue中的v-for渲染事件">
</div>
</div>
<div id="mapId" style="height: 500px;">
<script>
window.viewPonit=[];// 根据提供的地理区域或坐标设置地图视野
window.polylineObj=[];
var map = new BMap.Map("mapId");
map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
var RowKeys=["LNBSCB3F2FD11327120190327091134","LNBSCB3F2FD11327120190327103555"];
// 假设下面是第一个接口中请求过来的数据:用rowKey的值来请求过来每一条轨迹的经纬度
var result={
data:{
Record:[{
RowKey:"LNBSCB3F2FD11327120190327091134"
},{
RowKey:"LNBSCB3F2FD11327120190327103555"
}]
},
errcode: "",
errmsg: "",
state: "1",
};
var sumPath=[{RowKey:"LNBSCB3F2FD11327120190327091134",point:[
{Longitude: "104.074027",Latitude:"30.707441"},
{Longitude: "104.073849", Latitude:"30.707667"},
{Longitude: "104.073439", Latitude: "30.708143"},
{Longitude: "104.073197", Latitude: "30.708494"},
{Longitude: "104.073955", Latitude: "30.708502"},
{Longitude: "104.074909", Latitude: "30.708283"},
{Longitude: "104.075935", Latitude: "30.708124"},
{Longitude: "104.076907", Latitude: "30.708074"},
{Longitude: "104.077134", Latitude: "30.708088"},
{Longitude: "104.077203", Latitude: "30.70822"},
{Longitude: "104.077442", Latitude: "30.708328"},
{Longitude: "104.077563", Latitude: "30.708757"},
{Longitude: "104.077894", Latitude: "30.709436"},
{Longitude: "104.078166", Latitude: "30.710533"},
{Longitude: "104.078179", Latitude: "30.711313"},
{Longitude: "104.079046", Latitude: "30.711303"},
{Longitude: "104.080373", Latitude: "30.711341"},
{Longitude: "104.083328", Latitude: "30.711724"},
{Longitude: "104.084903", Latitude: "30.710111"},
{Longitude: "104.085773", Latitude: "30.709084"},
{Longitude: "104.08678", Latitude: "30.707893"},
{Longitude: "104.08766", Latitude: "30.707396"},
{Longitude: "104.088474", Latitude: "30.707899"},
{Longitude: "104.089106", Latitude: "30.707373"},
{Longitude: "104.08975", Latitude: "30.706569"},
{Longitude: "104.08981", Latitude: "30.706481"},
{Longitude: "104.089812", Latitude: "30.706463"},
{Longitude: "104.090075", Latitude: "30.706152"},
{Longitude: "104.090405", Latitude: "30.70575"},
{Longitude: "104.090774", Latitude: "30.705382"},
{Longitude: "104.091152", Latitude: "30.705076"},
{Longitude: "104.091376", Latitude: "30.70503"},
{Longitude: "104.091513", Latitude: "30.704999"},
{Longitude: "104.092173", Latitude: "30.704499"},
{Longitude: "104.092582", Latitude: "30.704179"},
{Longitude: "104.093084", Latitude: "30.703797"},
{Longitude: "104.092784", Latitude: "30.703114"},
{Longitude: "104.09221", Latitude: "30.702311"},
{Longitude: "104.091589", Latitude: "30.701418"},
{Longitude: "104.090919", Latitude: "30.70047"},
{Longitude: "104.090434", Latitude: "30.699731"},
{Longitude: "104.089988", Latitude: "30.698918"},
{Longitude: "104.089372", Latitude: "30.698138"},
{Longitude: "104.089149", Latitude: "30.697841"},
{Longitude: "104.089079", Latitude: "30.697768"},
{Longitude: "104.088915", Latitude: "30.697549"},
{Longitude: "104.088783", Latitude: "30.69735"},
{Longitude: "104.088663", Latitude: "30.697095"},
{Longitude: "104.088267", Latitude: "30.696512"},
{Longitude: "104.087917", Latitude: "30.695944"},
{Longitude: "104.087736", Latitude: "30.695665"},
{Longitude: "104.087737", Latitude: "30.695664"},
{Longitude: "104.087744", Latitude: "30.695633"},
{Longitude: "104.087717", Latitude: "30.695646"},
{Longitude: "104.087748", Latitude: "30.69565"},
{Longitude: "104.087794", Latitude: "30.69562"},
{Longitude: "104.087789", Latitude: "30.695607"},
{Longitude: "104.087757", Latitude: "30.695587"},
{Longitude: "104.087697", Latitude: "30.695522"},
{Longitude: "104.087692", Latitude: "30.695518"},
{Longitude: "104.087691", Latitude: "30.695475"},
{Longitude: "104.087713", Latitude: "30.695044"},
{Longitude: "104.08747", Latitude: "30.694616"},
{Longitude: "104.087704", Latitude: "30.694107"},
{Longitude: "104.089057", Latitude: "30.693239"},
{Longitude: "104.090454", Latitude: "30.692497"},
{Longitude: "104.09134", Latitude: "30.692105"},
{Longitude: "104.092401", Latitude: "30.691539"},
{Longitude: "104.093162", Latitude: "30.690982"},
{Longitude: "104.094377", Latitude: "30.690397"},
{Longitude: "104.095618", Latitude: "30.689868"},
{Longitude: "104.096944", Latitude: "30.689285"},
{Longitude: "104.098082", Latitude: "30.688697"},
{Longitude: "104.098549", Latitude: "30.688377"},
{Longitude: "104.098841", Latitude: "30.688191"},
{Longitude: "104.099224", Latitude: "30.687982"},
{Longitude: "104.099817", Latitude: "30.687664"},
{Longitude: "104.100589", Latitude: "30.686974"},
{Longitude: "104.101127", Latitude: "30.686045"},
{Longitude: "104.101417", Latitude: "30.685347"},
{Longitude: "104.101487", Latitude: "30.685103"},
{Longitude: "104.101575", Latitude: "30.684841"},
{Longitude: "104.101661", Latitude: "30.684491"},
{Longitude: "104.101797", Latitude: "30.684086"},
{Longitude: "104.10211", Latitude: "30.683614"},
{Longitude: "104.102555", Latitude: "30.683017"},
{Longitude: "104.103033", Latitude: "30.682261"},
{Longitude: "104.103687", Latitude: "30.681262"},
{Longitude: "104.104324", Latitude: "30.680185"},
{Longitude: "104.104847", Latitude: "30.679258"},
{Longitude: "104.10534", Latitude: "30.678399"},
{Longitude: "104.105858", Latitude: "30.6774"},
{Longitude: "104.106281", Latitude: "30.676203"},
{Longitude: "104.106763", Latitude: "30.674916"},
{Longitude: "104.107008", Latitude: "30.674346"},
{Longitude: "104.107371", Latitude: "30.673312"},
{Longitude: "104.107735", Latitude: "30.672597"},
{Longitude: "104.108093", Latitude: "30.672052"},
{Longitude: "104.108169", Latitude: "30.672066"},
{Longitude: "104.108357", Latitude: "30.671763"},
{Longitude: "104.108568", Latitude: "30.671393"},
{Longitude: "104.108794", Latitude: "30.670999"},
{Longitude: "104.109002", Latitude: "30.670466"},
{Longitude: "104.109247", Latitude: "30.669648"},
{Longitude: "104.109328", Latitude: "30.66947"},
{Longitude: "104.109379", Latitude: "30.66939"},
{Longitude: "104.109378", Latitude: "30.66935"},
{Longitude: "104.109422", Latitude: "30.669311"},
{Longitude: "104.109464", Latitude: "30.669272"},
{Longitude: "104.109483", Latitude: "30.669249"},
{Longitude: "104.109581", Latitude: "30.668991"},
{Longitude: "104.109982", Latitude: "30.668202"},
{Longitude: "104.110218", Latitude: "30.666918"},
{Longitude: "104.11042", Latitude: "30.666081"},
{Longitude: "104.110035", Latitude: "30.665753"},
{Longitude: "104.109099", Latitude: "30.66555"},
{Longitude: "104.108754", Latitude: "30.665493"},
{Longitude: "104.1087", Latitude: "30.665405"},
{Longitude: "104.108675", Latitude: "30.665402"},
{Longitude: "104.108667", Latitude: "30.665388"}]},
{RowKey:"LNBSCB3F2FD11327120190327103555", point:[
{ Longitude: "104.108671", Latitude: "30.665446"},
{ Longitude: "104.108674", Latitude: "30.665469"},
{ Longitude: "104.108665", Latitude: "30.665504"},
{ Longitude: "104.108886", Latitude: "30.665541"},
{ Longitude: "104.109118", Latitude: "30.665525"},
{Longitude: "104.109635", Latitude: "30.665707"},
{ Longitude: "104.110082", Latitude: "30.665854"},
{ Longitude: "104.110456", Latitude: "30.665854"},
{ Longitude: "104.110713", Latitude: "30.665265"},
{ Longitude: "104.11079", Latitude: "30.665048"},
{ Longitude: "104.11084", Latitude: "30.664966"},
{ Longitude: "104.110875", Latitude: "30.664916"},
{ Longitude: "104.110878", Latitude: "30.664905"},
{ Longitude: "104.110942", Latitude: "30.664869"},
{ Longitude: "104.111039", Latitude: "30.664821"},
{ Longitude: "104.111067", Latitude: "30.664806"},
{ Longitude: "104.111104", Latitude: "30.664769"},
{ Longitude: "104.111136", Latitude: "30.664736"},
{ Longitude: "104.110996", Latitude: "30.664811"},
{ Longitude: "104.110988", Latitude: "30.6648"},
{ Longitude: "104.111038", Latitude: "30.664706"},
{ Longitude: "104.111053", Latitude: "30.664683"},
{ Longitude: "104.11132", Latitude: "30.664111"},
{ Longitude: "104.111611", Latitude: "30.663403"},
{ Longitude: "104.111665", Latitude: "30.663251"},
{ Longitude: "104.11173", Latitude: "30.663238"},
{ Longitude: "104.111794", Latitude: "30.663281"},
{ Longitude: "104.111895", Latitude: "30.663286"},
{ Longitude: "104.112526", Latitude: "30.663235"},
{ Longitude: "104.113186", Latitude: "30.663265"},
{ Longitude: "104.114061", Latitude: "30.663335"},
{ Longitude: "104.11468", Latitude: "30.663531"},
{ Longitude: "104.115255", Latitude: "30.663612"},
{Longitude: "104.11565", Latitude: "30.663767"}
]}
];
// 循环请求出来经纬度
for(var i= 0;i<result.data.Record.length;i++){
wheelPath(result.data.Record[i].RowKey,i,result.data.Record.length);
}
// 模拟接口请求，请求出来RowKey所对应的经纬度
function wheelPath(RowKey,index) {
var color=['#e4613b','#6b9519','#b2a605','#956303','#308705','#bf710d','#d74108','#b5c105','#443ad7','#35cf96','#6a0893','#3605cd',"#546215","#ae7013","#ec9a1f","#d76504","#11d5c3","#11d57a","#11d556","#14d511","#2b49db","#6a7bcf","#32395c","#563499","#7d47e6","#b42dec"]
var LngAndLat= _.filter(sumPath, { 'RowKey': RowKey });
console.log("经纬度："+JSON.stringify(LngAndLat));
drawLine(LngAndLat[0].point,RowKey,color[index]);
}
// 画出所有的轨迹
function drawLine(pointStr,RowKey,color) {
// 处理成百度地图上需要的经纬度
var pointArr = [];
for (var k = 0; k < pointStr.length; k++) {
pointArr.push({
lng: pointStr[k].Longitude,
lat: pointStr[k].Latitude
});
}
// 转成百度地图所使用的坐标点
var trackPoint = [];
var first;// 第一条数据的开始点
var last;// 最后一条数据的结束点
for (var i = 0, j = pointArr.length; i < j; i++) {
trackPoint.push(translateBD(pointArr[i].lng,pointArr[i].lat));
window.viewPonit=window.viewPonit.concat(trackPoint);// concat 既可以连接字符串又可以连接数组
}
// 高亮显示一组数据
var polyline={RowKey:RowKey,point:trackPoint};
window.polylineObj.push(polyline);
map.centerAndZoom(window.viewPonit, 13);
map.setViewport(window.viewPonit);// 根据提供的地理区域或坐标设置地图视野
}
// 转成正常经纬度
function translateBD(Latitude,Longitude){
var arr1 = GPS.gcj_encrypt(Number(Longitude), Number(Latitude));
var arr2 = GPS.bd_encrypt(arr1['lat'], arr1['lon']);
var point = new BMap.Point(arr2['lon'], arr2['lat']);
//var point = new BMap.Point(Longitude, Latitude);
return point;
}
// 对数据进行整理
var PointArr=window.polylineObj;
var carMk;//先将终点坐标展示的mark对象定义
// 起点图标
var startPoint = new BMap.Icon("startMap.png", new BMap.Size(45,45),{
anchor: new BMap.Size(20, 45),
imageSize:new BMap.Size(45, 45)
});
//中间点图标
var drivingPoint = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26), {
anchor : new BMap.Size(27, 13),
imageSize:new BMap.Size(52,26)
});
//终点图标
var terminalPoint = new BMap.Icon('endMap.png', new BMap.Size(45,45), {
anchor : new BMap.Size(20, 45),
imageSize:new BMap.Size(45,45)
});
// 定时器
var firstInterval;
var secondInterval;
var firstLength=0;
var secondLength=0;
// 怎么按顺序遍历二维数组 ，如果是for里面是一个setInterval，则到for循环到最后一个数的时候，才执行setInterval。 需要用2个setInterval来解决，setInterval是异步的，里面却是同步的
document.getElementById("play").addEventListener("click",function () {
if(!$("#play").attr("disabled")){
addMarker(new BMap.Point(PointArr[0].point[0].lng, PointArr[0].point[0].lat),'起点',map);// 添加起始图标
$("#play").attr("disabled",true);
$("#play").css({color:"gray"})
$("#pause").css({color:"red"})
firstTraverse();
}else{
alert("正在播放中，请清空之后，在点击播放按钮");
}
});
document.getElementById("pause").addEventListener("click",function () {
// 清除定时器
clearInterval(secondInterval);
$("#play").attr("disabled",false);
$("#play").css({color:"red"});
$("#pause").css({color:"gray"});
});
document.getElementById("clear").addEventListener("click",function () {
firstLength=0;
secondLength=0;
clearInterval(firstInterval);
clearInterval(secondInterval);
map.clearOverlays();// 清除覆盖物
$("#ifTable div").css({"background": 'transparent'});
sessionStorage.removeItem("intervalDataIndex");
$("#play").attr("disabled",false);
$("#play").css({color:"red"});
$("#pause").css({color:"gray"});
})
// 第一层的遍历
function firstTraverse () {
// 添加起始点坐标
if(firstLength>=PointArr.length){
return
}
var firstData=PointArr[firstLength].point;
if(!sessionStorage.getItem("intervalDataIndex")){
map.clearOverlays();// 清除覆盖物
addMarker(new BMap.Point(firstData[0].lng, firstData[0].lat),'起点',map);//起点图标的添加
}
firstInterval=setInterval(function () {
// 控制table行变色
$("#ifTable div").each(function (index, val) {
if (index == firstLength) {
$("#ifTable div").css({"background": 'transparent'});
$(this).css({"background": '#DEDEDE'});
}
})
clearInterval(firstInterval);
if(firstLength<PointArr.length){
var point=PointArr[firstLength].point;
secondTraverse(PointArr[firstLength].point);
}
},100)
}
// 第二层的遍历
function secondTraverse (point) {
secondInterval=setInterval(function () {
sessionStorage.setItem("intervalDataIndex", JSON.stringify({oneIndex:firstLength, twoIndex:secondLength}));
if(secondLength>= point.length){
clearInterval(secondInterval);// 要清的是第二个定时器
secondLength=0;
firstLength++;
firstTraverse();// 从第一个开始重新调用
return;
}
//drivePath(map,point[secondLength],point[secondLength+1]);// 划线
if(secondLength==point.length-1){
if(firstLength==PointArr.length-1){
addMarker(new BMap.Point(point[secondLength].lng, point[secondLength].lat), '终点', map);//添加终点图标
}else{
addMarker('','停靠点',map,'',new BMap.Point(point[secondLength].lng,point[secondLength].lat));
}
}else{
drivePath(map,point[secondLength],point[secondLength+1]);// 划线
}
secondLength++;
},100)
}
// 划线
function drivePath(map,PointArr,PointArrNext) {
var polyline22 = new BMap.Polyline([
new BMap.Point(PointArr.lng, PointArr.lat),
new BMap.Point(PointArrNext.lng, PointArrNext.lat)
],
{
strokeColor: "#b2a605",
strokeWeight: 7,
strokeOpacity: 1
}); //创建折线
map.addOverlay(polyline22);
addMarker(new BMap.Point(PointArrNext.lng, PointArrNext.lat), '中间点', map, PointArrNext, new BMap.Point(PointArr.lng, PointArr.lat));//添加图标
}
//添加起始，中间和终点图标
function addMarker(point, name,mapInit,trackUnit,prePoint) {
if(name=="起点"){
window.marker = new BMap.Marker(point,{icon:startPoint}); // 创建标注
mapInit.addOverlay(marker); // 将标注添加到地图中
}
if(name=="中间点"){
if(carMk){//先判断第一次进来的时候这个值有没有定义，有的话就清除掉上一次的。然后在进行画图标。第一次进来时候没有定义也就不走这块，直接进行画图标
mapInit.removeOverlay(carMk);
}
carMk = new BMap.Marker(point,{icon:drivingPoint}); // 创建标注
carMk.setRotation(trackUnit.route);//trackUnit.route
//getAngle(point,prePoint);// js求解两点之间的角度
carMk.setRotation(getAngle(point,prePoint)-90);// 旋转的角度
mapInit.addOverlay(carMk); // 将标注添加到地图中
}
if(name=="停靠点"){
if (carMk) {// 把小车的图标去掉
mapInit.removeOverlay(carMk);
}
// 添加中间暂停图标
var myIconPause = new BMap.Icon('stopPark.png', new BMap.Size(35, 35),
{
imageSize: new BMap.Size(35, 35),
infoWindowAnchor: new BMap.Size(0, -3),
anchor: new BMap.Size(20, 45)
});//初始化终点坐标图标
var Pause = new BMap.Marker(prePoint, {icon: myIconPause}); // 创建终点标注
mapInit.addOverlay(Pause); // 将标注添加到地图中
}
if(name=="终点"){
mapInit.removeOverlay(carMk);
carMk = new BMap.Marker(point,{icon:terminalPoint}); // 创建标注
mapInit.addOverlay(carMk);
sessionStorage.removeItem("intervalDataIndex");// 清除循环过的标记
$("#play").attr("disabled",true);
$("#play").css({color:"gray"});
$("#pause").attr("disabled",true);
$("#pause").css({color:"gray"});
}
}
//获得角度的函数
function getAngle(n,next){
var ret
var w1 = n.lat/180 * Math.PI
var j1 = n.lng/180 * Math.PI
var w2 = next.lat/180 * Math.PI
var j2 = next.lng/180 * Math.PI
ret = 4 * Math.pow(Math.sin((w1 - w2) / 2), 2) - Math.pow(Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)), 2);
ret = Math.sqrt(ret);
// var temp = Math.sin(Math.abs(j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
var temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
ret = ret/temp;
ret = Math.atan(ret) / Math.PI * 180 ;
ret += 90;
// 这里用如此臃肿的if..else是为了判定追踪单个点的具体情况,从而调整ret的值
if(j1-j2 < 0){
// console.log('j1<j2')
if(w1-w2 < 0){
// console.log('w1<w2')
ret;
}else{
// console.log('w1>w2')
ret = -ret+180;
}
}else{
// console.log('j1>j2')
if(w1-w2 < 0){
// console.log('w1<w2')
ret = 180+ret;
}else{
// console.log('w1>w2')
ret = -ret;
}
}
return ret ;
}
</script>
</body>
</html>
2、页面中需要的2个js文件和3个图标
lodash文件：https://raw.githubusercontent.com/lodash/lodash/4.17.5/dist/lodash.js
GPS：https://www.cnblogs.com/ilimengyang/p/9570389.html
开始图标和结束图标：
浙公网安备 33010602011771号