经常有人问怎么控制车辆车头方向随着行进方向改变, 怎么展示车辆运行轨迹
在高德地图中展示车辆轨迹有三种方法，一种方法是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;
}
