如何将小车标注在百度地图上并且设置车头方向
首先，需要在项目中引入百度地图的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
