高德地图车头方向，marker方向控制，车辆移动，轨迹展示，轨迹回放

一颗小行星!

已于 2022-04-19 17:29:17 修改

阅读量1.7w

点赞数 3

分类专栏：前端开发文章标签： js 高德地图

于 2020-06-17 16:06:05 首次发布

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

版权

前端开发专栏收录该内容

120 篇文章 2 订阅

订阅专栏

经常有人问怎么控制车辆车头方向随着行进方向改变, 怎么展示车辆运行轨迹

在高德地图中展示车辆轨迹有三种方法，一种方法是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">
    <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>
<div class="input-card">
    <h4>轨迹回放控制</h4>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script>
    var marker, lineArr = [[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 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"  //线样式
    });
    var i = 0,path=[];
	const timer = setInterval(()=>{
	   if(i === lineArr.length-1){
	   	clearInterval(timer)
	   }
       marker.moveTo(lineArr[i++], 120000)
    },1000)
    marker.on('moving', function (e) {
		Array.prototype.push.apply(path,e.passedPath)
        passedPolyline.setPath(path);
    });

    map.setFitView();
</script>
</body>
</html>

手动控制车头方向

代码来源于网络，根据勾股定理计算两点连线的角度

//传入两个经纬度点得到车辆角度 设置车辆Marker角度
const getAngle = (startPoint, endPoint) => {
    if (!(startPoint && endPoint)) {
        return 0;
    }

    let dRotateAngle = Math.atan2(
        Math.abs(startPoint.lng - endPoint.lng),
        Math.abs(startPoint.lat - endPoint.lat)
    );
    if (endPoint.lng >= startPoint.lng) {
        if (endPoint.lat >= startPoint.lat) {
        } else {
            dRotateAngle = Math.PI - dRotateAngle;
        }
    } else {
        if (endPoint.lat >= startPoint.lat) {
            dRotateAngle = 2 * Math.PI - dRotateAngle;
        } else {
            dRotateAngle = Math.PI + dRotateAngle;
        }
    }
    dRotateAngle = (dRotateAngle * 180) / Math.PI;
    return dRotateAngle;
}

感谢阅读！欢迎关注微信公众号”混沌前端“，获取推送更新。

一颗小行星!

关注

3
点赞
踩
28

收藏

觉得还不错? 一键收藏
打赏
2
评论
高德地图车头方向，marker方向控制，车辆移动，轨迹展示，轨迹回放

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

扫一扫