首先，需要在項目中引入百度地圖的API
第二步，將百度地圖嵌入到項目中
第三步，將小車標註在地圖中
第四步，設置車頭的方向
<html lang="en">
<head>
<meta charset="utf-8" />
<title>軌跡回放(路書)</title>
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微軟雅黑";
}
#map_canvas {
width: 100%;
height: 500px;
}
#result {
width: 100%
}
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=gdKyUi5DHLFBmLRGhKQLkltP79R7TlGB"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
</head>
<body>
<div id="map_canvas"></div>
<div id="clear">清除覆蓋物</div>
<script>
var map = new BMap.Map('map_canvas');
map.enableScrollWheelZoom();
var point = new BMap.Point(117.005811, 32.622846);
map.centerAndZoom(point, 12);
// 構建座標一組座標
let arr = [{ lng: 117.008111, lat: 32.708925, carNo: '蘇A00001',rotation:30 },
{ lng: 117.074226, lat: 32.658358, carNo: '蘇A00002' ,rotation:77},
{ lng: 116.895715, lat: 32.564197, carNo: '蘇A00003' ,rotation:106},
{ lng: 117.023633, lat: 32.663221, carNo: '蘇A00004' ,rotation:190},
];
arr.forEach(item => {
var marker = new BMap.Marker(new BMap.Point(item.lng, item.lat), {
icon: new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52, 26),
{ anchor: new BMap.Size(27, 13) })
});
// 角度轉換
let rsRotation = item.rotation + 270;
if (rsRotation > 360) {
rsRotation = rsRotation - 360;
}
marker.setRotation(rsRotation);
var label = new BMap.Label(item.carNo, { offset: new BMap.Size(0, -33) });
label.setStyle({ border: "1px solid rgb(204, 204, 204)", color: "rgb(0, 0, 0)", borderRadius: "10px", padding: "5px",
background: "rgb(255, 255, 255)", });
marker.setLabel(label);
map.addOverlay(marker);
});
$("clear").onclick = function () {
map.clearOverlays();
}
function $(element) {
return document.getElementById(element);
}
</script>
</body>
</html>
可以查看原文，圖文並茂比較清晰
文章轉自：https://jingyan.baidu.com/article/1612d5006a5dd4a30e1eeea4.html