百度地图根据经纬度坐标，显示汽车行驶轨迹

继上一篇：百度地图根据经纬度坐标，显示轨迹又进行了些许优化。将固定点为变为汽车行驶轨迹并添加点位。

上一篇链接：https://blog.****.net/qq_36865945/article/details/107356608

将

改为

百度地图根据经纬度坐标，显示汽车行驶轨迹

后台代码没变动，主要为前端JS代码变动：

首先初始化时 searchTrackmaps（）；

然后对应的

function searchTrackmaps(vehiclePassTime,cphData) {
//查询基础数据
$.ajax({
type : 'POST',
dataType : "json",
data: {
cphData: cphData,
},
url : '${pageContext.request.contextPath}/webservice/vehicelInfo/TrackMap',
success : function(data) {
setTrackmap(data)
}
});
}

上述代码没变动主要变动为下述代码：

//生成坐标点
var PointArr = [];
var carMk;//先将终点坐标展示的marktrackPoint定义
function setTrackmap(pointArrList) {

   var map = new BMap.Map("mapcontainer");
   var point = new BMap.Point(87.623272, 43.831565);
   map.centerAndZoom(point, 13);
   map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
   map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
   PointArr.splice(0,PointArr.length);
   if(pointArrList.length>0){
       var s = pointArrList.toString();

       var pointStr = s.split(",");
       var pointArrs = [];

       for (var k = 0; k < pointStr.length; k += 2) {
           pointArrs.push({
       lng: pointStr[k],
       lat: pointStr[k + 1]
       });
       }
       for (var i = 0, j = pointArrs.length; i < j; i++) {
           PointArr.push(new BMap.Point(pointArrs[i].lng, pointArrs[i].lat));
       }
       map.centerAndZoom(PointArr, 14);// 根据经纬度显示地图的范围
map.setViewport(PointArr);// 根据提供的地理区域或坐标设置地图视野

addStartMarker(new BMap.Point(PointArr[0].lng, PointArr[0].lat),'起点',map);
var carMk;//先将终点坐标展示的mark对象定义

var i = 0;
var interval = setInterval(function () {
if (i >= PointArr.length) {
clearInterval(interval);
return;
}
drowLine(map,PointArr[i],PointArr[i+1]);//画线调用
i = i + 1;
}, 1000);

   }

   changeMapStyle(map);
}

// 划线
function drowLine(map,PointArr,PointArrNext) {
if(PointArrNext!=undefined) {
var polyline = new BMap.Polyline(
[
new BMap.Point(PointArr.lng, PointArr.lat),
new BMap.Point(PointArrNext.lng, PointArrNext.lat)
],
{
strokeStyle:"dashed",
strokeColor: "green",
strokeWeight: 3,
strokeOpacity: 1
}); //创建折线
map.addOverlay(polyline);
addMarkerEnd(new BMap.Point(PointArrNext.lng, PointArrNext.lat), '小车行驶', map, PointArrNext, new BMap.Point(PointArr.lng, PointArr.lat));//添加图标
}else {
addMarkerEnd(new BMap.Point(PointArr.lng, PointArr.lat), '终点', map);//添加终点图标
}
}

//添加起始图标
function addStartMarker(point, name,mapInit) {
if(name=="起点"){
var myIcon = new BMap.Icon("${pageContext.request.contextPath}/images/ns/carDocument/start.png", new BMap.Size(45,45),{
anchor: new BMap.Size(20, 45),//这句表示图片相对于所加的点的位置mapStart
imageSize:new BMap.Size(45, 45)//图标所用的图片的大小，此功能的作用等同于CSS中的background-size属性。可用于实现高清屏的高清效果
// offset: new BMap.Size(-10, 45), // 指定定位位置
// imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
});
window.marker = new BMap.Marker(point,{icon:myIcon}); // 创建标注
mapInit.addOverlay(marker); // 将标注添加到地图中
//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}
}
//添加行驶和终点图标
function addMarkerEnd(point, name,mapInit,trackUnit,prePoint) {
if(name=="小车行驶"){
if(carMk){//先判断第一次进来的时候这个值有没有定义，有的话就清除掉上一次的。然后在进行画图标。第一次进来时候没有定义也就不走这块，直接进行画图标
mapInit.removeOverlay(carMk);
}
var drivingPoint = new BMap.Icon("${pageContext.request.contextPath}/images/ns/carDocument/carr.png", new BMap.Size(67,40), {
anchor : new BMap.Size(27, 13),
imageSize:new BMap.Size(67,40)
});
var dianweiIcon = new BMap.Icon("${pageContext.request.contextPath}/images/ns/carDocument/u191.svg", new BMap.Size(33, 50));
var offset = new BMap.Size(0, -13);
var marker = new BMap.Marker(point, {
   icon: dianweiIcon,
   offset: offset
   }); // 创建标注
   mapInit.addOverlay(marker);
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); // 将标注添加到地图中
//carMk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}else {
   //终点图标
var terminalPoint = new BMap.Icon("${pageContext.request.contextPath}/images/ns/carDocument/end.png", new BMap.Size(45,45), {
anchor : new BMap.Size(20, 45),
imageSize:new BMap.Size(45,45)
});
mapInit.removeOverlay(carMk);
carMk = new BMap.Marker(point,{icon:terminalPoint}); // 创建标注
mapInit.addOverlay(carMk);
}
}

//获得角度的函数
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 ;
}

百度地图根据经纬度坐标，显示汽车行驶轨迹

相关推荐