百度地图的多条行驶轨迹,增加暂停的播放的按钮,并显示是那一条行驶的轨迹

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

  开始图标和结束图标:

  

 

posted @ 2019-04-15 16:01  叶韵  Views(1512)  Comments(0Edit  收藏  举报