高德地图实时轨迹播放或历史轨迹查看demo

淩亂°似流年 2022-11-30 04:29 224阅读 0赞

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>轨迹回放</title>
        <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
        <style>
            html, body, #container { 
                height: 100%;
                width: 100%;
            }
    
            .input-card .btn{ 
                margin-right: 1.2rem;
                width: 9rem;
            }
    
            .input-card .btn:last-child{ 
                margin-right: 0;
            }
        </style>
    </head>
    <body>
    <div id="container"></div>
    
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key"></script>
    <script>
        var i = 0;
        var arr = [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]];
    
        var marker, lineArr = [[116.478935,39.997761]]; 
            console.log(lineArr);
    
        var map = new AMap.Map("container", { 
            resizeEnable: true,
            center: [116.397428, 39.90923],
            zoom: 17
        });
    
        marker = new AMap.Marker({ 
            map: map,
            position: [116.478935,39.997761],
            icon: "https://webapi.amap.com/images/car.png",
            offset: new AMap.Pixel(-26, -13),
            autoRotation: true,
            angle:-90,
        });
    
        // 绘制轨迹
        var polyline = new AMap.Polyline({ 
            map: map,
            path: lineArr,
            showDir:true,
            strokeColor: "#28F",  //线颜色
            // strokeOpacity: 1, //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid" //线样式
        });
    
        var passedPolyline = new AMap.Polyline({ 
            map: map,
            // path: lineArr,
            strokeColor: "#AF5",  //线颜色
            // strokeOpacity: 1, //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid" //线样式
        });
    
    
        marker.on('moving', function (e) { 
            passedPolyline.setPath(e.passedPath);
        });
    
        map.setFitView();
        var interval = setInterval("getPoint()",1000);
    
        function getPoint(){ 
            if(i> arr.length-2)return;
            var line = [];
            line.push(arr[i]);
    
            i ++;
            line.push(arr[i]);
            console.log(line);
            // lineArr.push(arr[i]);
            // 绘制轨迹
        var polyline = new AMap.Polyline({ 
            map: map,
            path: line,
            showDir:true,
            strokeColor: "#28F",  //线颜色
            // strokeOpacity: 1, //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid" //线样式
        });
        // var interval = setInterval("getPoint()",5000);
            marker.moveAlong(line,200);
    
        // setInterval(getPoint(),5000);
    
        }
    
        function startAnimation () { 
            marker.moveAlong(lineArr, 200);
        }
    
        function pauseAnimation () { 
            marker.pauseMove();
        }
    
        function resumeAnimation () { 
            marker.resumeMove();
        }
    
        function stopAnimation () { 
            marker.stopMove();
        }
    </script>
    </body>
    </html>