高德地图——车随轨迹点移动

最新推荐文章于 2023-06-25 15:11:39 发布

who_become_gods

最新推荐文章于 2023-06-25 15:11:39 发布

阅读量4.5k

点赞数 5

原文链接：https://blog.csdn.net/w20101310/article/details/106809279

版权

经常有人问怎么控制车辆车头方向随着行进方向改变, 怎么展示车辆运行轨迹
在高德地图中展示车辆轨迹有三种方法，一种方法是AMapUI的PathSimplifier创建巡航器来展示轨迹：
高德地图轨迹展示示例
第二种方法是使用moveAlong,moveAlong可以让marker按照给定的经纬度数组以指定的速度移动
高德地图轨迹回放示例
第三中方法是使用moveTo，moveTo可以让marker以给定的速度从一个经纬度移动到另一个经纬度并自动调整车头方向(车头方向与起点到终点的直线平行)。也可以看做moveTo是moveAlong分步主动调用。

下面的例子是对官方demo进行了简单修改，通过moveTo每隔一秒钟更新车辆位置实现轨迹回放在这里插入图片描述

<!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>

who_become_gods

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
高德地图——车随轨迹点移动

经常有人问怎么控制车辆车头方向随着行进方向改变, 怎么展示车辆运行轨迹在高德地图中展示车辆轨迹有三种方法，一种方法是AMapUI的PathSimplifier创建巡航器来展示轨迹：高德地图轨迹展示示例第二种方法是使用moveAlong,moveAlong可以让marker按照给定的经纬度数组以指定的速度移动高德地图轨迹回放示例第三中方法是使用moveTo，moveTo可以让marker以给定的速度从一个经纬度移动到另一个经纬度并自动调整车头方向(车头方向与起点到终点的直线平行)。也可以看做move
复制链接

扫一扫