基于高德地图的汽车行驶轨迹

最新推荐文章于 2024-06-18 15:47:26 发布

青阳zi

最新推荐文章于 2024-06-18 15:47:26 发布

阅读量1.8k

点赞数 2

文章标签：汽车 javascript webview

本文链接：https://blog.csdn.net/qq_34093387/article/details/123446968

版权

高德地图 JavaScript API 轨迹回放地图绘制 Vue.js

关键词由CSDN通过智能技术生成

<!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">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=612bef20cf095403974d0b0cd170103e"></script>
    <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>
    <div class="input-card">
        <h4>轨迹回放控制</h4>
    </div>
    <script>
        var marker
        var polylineList = [
            [118.626495, 32.05714], [118.626785, 32.057396], [118.626892, 32.057491], [118.62735, 32.057919], [118.627472, 32.058029], [118.627556, 32.058102], [118.627808, 32.058334], [118.628204, 32.058693], [118.62896, 32.059357], [118.629112, 32.059509], [118.629295, 32.059666], [118.629402, 32.05975], [118.629501, 32.05983], [118.629837, 32.060143], [118.629837, 32.060204], [118.630028, 32.060368], [118.630142, 32.060471], [118.630363, 32.060677], [118.630371, 32.060688], [118.630737, 32.061008], [118.630852, 32.061108], [118.630989, 32.061226], [118.631119, 32.061359], [118.631271, 32.061485], [118.631645, 32.061813], [118.63192, 32.062057], [118.63237, 32.062454], [118.632515, 32.062572], [118.632607, 32.062645], [118.632896, 32.062885], [118.632988, 32.062965], [118.633209, 32.063141], [118.633781, 32.06358], [118.634094, 32.063835], [118.634216, 32.063919], [118.634514, 32.064144], [118.634811, 32.064362], [118.634811, 32.064362], [118.63501, 32.064419], [118.635162, 32.064423], [118.6353, 32.064396], [118.635414, 32.064358], [118.635788, 32.064137], [118.635788, 32.064137], [118.635651, 32.063931], [118.635597, 32.063915], [118.635201, 32.064106]
        ]

        // map 建立地图容器  (级别 中心)
        var map = new AMap.Map('container', {
            zoom: 1,
            center: [116.469881, 39.993599],
            showIndoorMap: false,//隐藏地图自带的室内地图图层
        })

        //polyline画线 折线
        var polyline = new AMap.Polyline({
            path: polylineList,
            strokeColor: '#2f66ff',
            strokeOpacity: 1,
            strokeWeight: 4,
            strokeStyle: 'solid',
            strokeDasharray: [10, 5],
            geodesic: true,
        })
        polyline.setMap(map)

        //自适应所有的点 让点显示在可视区域内
        var overlaysList = map.getAllOverlays('polyline')
        map.setFitView(overlaysList)

        //让车根据轨迹走 
        var passedPolyline = new AMap.Polyline({
            map: map,
            strokeColor: "#AF5",  //线颜色
            strokeWeight: 4,      //线宽
        })

        //车开始坐标
        var marker = new AMap.Marker({
            map: map,
            position: [118.626495, 32.05714],
            icon: "https://webapi.amap.com/images/car.png",
            offset: new AMap.Pixel(-26, -13),
            autoRotation: true,
            angle: -90,
        });
        var i = 0, path = [];
        const timer = setInterval(() => {
            if (i === polylineList.length - 1) {
                clearInterval(timer)
            }
            marker.moveTo(polylineList[i++], 300)
        }, 1000)
        // marker.on('moving', function (e) {
        //     Array.prototype.push.apply(path, e.passedPath)
        //     passedPolyline.setPath(path);
        // })
    </script>
</body>

</html>

另外基于vue的写法请参考我的github：GitHub - liwencai/Vue-js-ts--vue-map: 高德地图实现车辆轨迹回放,Js+Ts