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

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

上一篇链接：https://blog.csdn.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 ;
}