經常有人問怎么控制車輛車頭方向隨着行進方向改變, 怎么展示車輛運行軌跡
在高德地圖中展示車輛軌跡有三種方法，一種方法是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;
}
