百度地图——覆盖物在多条轨迹上循环移动

Posted 2021-11-02 creatqgap

1 需求：界面呈现多条路线（此处3条）。点击相应路线地图上出现相应路线。并有小车图标在轨迹上移动。小车图标能随轨迹旋转保证车头始终指向路线前进方向。不点击路线事件时。地图上多条轨迹自动循环播放。

 

2 js主要代码：

var polylinex=null;
var roadNum = 2;

var timer =null;

// 线路排行点击事件，3条线路。openLine(i)为线路名的div点击事件
function openLine(i) {
map.clearOverlays();
clearTimeout(timer);
roadNum = i+1;
if(roadNum>3){
roadNum = 1;
}

//改变线路div样式
var lines = [" ","#line1","#line2","#line3"];
$(lines[1]).removeClass(‘big‘); 
$(lines[2]).removeClass(‘big‘); 
$(lines[3]).removeClass(‘big‘); 
$(lines[i]).addClass(‘big‘);
if (i == 1)
{
getWeight(p1,p2,10);  //改变地图中路线样式
run(p1,p2); //添加覆盖物（小车图标）并让小车图标沿路线移动
getWeight(p1,p3,5);
getWeight(p4,p2,5);
markerLabel() 
}
else if (i == 2)
{
getWeight(p1,p2,5);
getWeight(p1,p3,10);
getWeight(p4,p2,5);
markerLabel();
run(p1,p3);

}
else
{
getWeight(p1,p2,5);
getWeight(p1,p3,5);
getWeight(p4,p2,10);
markerLabel();
run(p4,p2);
} 
}

//改变地图中轨迹（线路）样式
getWeight(p1,p2,10);
function getWeight(point1,point2,weight){ 

var driving1 = new BMap.DrivingRoute(map);
driving1.search(point1, point2);
driving1.setSearchCompleteCallback(function() {
var pts1 = driving1.getResults().getPlan(0).getRoute(0).getPath(); //得到一个数组
polylinex = new BMap.Polyline(pts1, {
strokeColor: "#765af9",
strokeWeight: weight,
strokeOpacity: 0.9
});
map.addOverlay(polylinex);

}); 
}

// 传入起终点画线并让覆盖物在轨迹上移动
function run(p1, p2) {
var driving1 = new BMap.DrivingRoute(map);
driving1.search(p1, p2);
driving1.setSearchCompleteCallback(function() {
var pts1 = driving1.getResults().getPlan(0).getRoute(0).getPath(); //得到一个数组
var polyline1 = new BMap.Polyline(pts1, {
strokeColor: "#765af9",
strokeWeight: 10,
strokeOpacity: 0.9
});
map.addOverlay(polyline1);
setTimeout(function() {
map.setViewport([p1, p2]);
jumps(pts1);
}, 0);
});
}

// 传入数组就可以跑
function jumps(pts) {
/* var lushu = new BMapLib.LuShu(map,pts,{
defaultContent:"",//"从天安门到百度大厦"
autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
icon : new BMap.Icon(‘http://lbsyun.baidu.com/jsdemo/img/car.png‘, new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
speed: 4500,
enableRotation:true,//是否设置marker随着道路的走向进行旋转
landmarkPois: [{lng:30.277072,lat:120.076409,html:‘ <script>openLine(roadNum);</script>‘,pauseTime:2}
]});
lushu.start();*/

 

// 运动图片
var myIcon = new BMap.Icon("./img/arrow.png", new BMap.Size(58, 53), { //小车图片
offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});

var carMk = new BMap.Marker(pts[0], {
icon: myIcon
});
map.addOverlay(carMk);
var i = 0;

function resetMkPoint(i) {
carMk.setPosition(pts[i]);
if (i < pts.length) {
timer = setTimeout(function() {
i++;
if(i+1 < pts.length){
carMk.setRotation(findRotation(pts[i],pts[i+1]));//设置旋转角度
//carMk.setRotation(180);
}
resetMkPoint(i);
}, 100);
} else {
openLine(roadNum);
}
}
setTimeout(function() {
resetMkPoint(5);
}, 100)
}
setTimeout(function() {
run();
}, 10);
run(p1, p2); // 默认跑线路1

//找到每一次小车运动，需要偏移的角度
function findRotation(startPoint,endPoint){
var x = endPoint.lng-startPoint.lng;//lng-经度，lat-纬度
var y = endPoint.lat-startPoint.lat;
if(x==0){
return 0;
}
if(x>0){
var z=Math.sqrt(x*x+y*y);
var jiaodu=Math.round((Math.asin(y/z)/Math.PI*180));//最终角度
if(jiaodu>=0){
return 90-jiaodu;
}else{
return 90+Math.abs(jiaodu);
}
}
if(x<0){
var z=Math.sqrt(x*x+y*y);
var jiaodu=Math.round((Math.asin(y/z)/Math.PI*180));//最终角度
if(jiaodu>=0){
return 360+jiaodu;
}else{
return 360-Math.abs(jiaodu);
}
}

}

// 标轨迹的注起点终点
function markerLabel(){
map.addOverlay(marker01);
marker01.setLabel(label1);
map.addOverlay(marker02);
marker02.setLabel(label2);
}

var iconImg1 = new BMap.Icon("img/start.png", new BMap.Size(40, 48));
var iconImg2 = new BMap.Icon("img/end.png", new BMap.Size(40, 48));
// 起点坐标打点标注
var marker01 = new BMap.Marker(p1, {
icon: iconImg1
});
label1 = new BMap.Label("起点：西湖音乐喷泉", {
offset: new BMap.Size(45, 18)
});
label1.setStyle({
color: "#ffffff",
fontSize: "18px",
lineHeight: "40px",
fontFamily: "微软雅黑",
height: "40px",
border: "0",
padding: "0 15px",
textShadow: "0",
backgroundColor: "#274359",
borderRadius: "10px",
cursor: "pointer"
});
// 终点坐标打点标注
var marker02 = new BMap.Marker(p2, {
icon: iconImg2
});
label2 = new BMap.Label("终点：西溪国家湿地公园", {
offset: new BMap.Size(45, -58)
});
label2.setStyle({
color: "#ffffff",
fontSize: "18px",
lineHeight: "40px",
fontFamily: "微软雅黑",
height: "40px",
border: "0",
padding: "0 15px",
textShadow: "0",
backgroundColor: "#274359",
borderRadius: "10px",
cursor: "pointer"
});