如何将小车标注在百度地图上并且设置车头方向_百度地图移动小车模版-优快云博客

本文介绍如何使用百度地图API在项目中嵌入地图，并通过JavaScript代码将小车图标标注在地图上的指定位置，同时设置车头方向。通过构建坐标数组，遍历每个坐标点，创建带有车辆图标的小车标注，调整其旋转角度以指示方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，需要在项目中引入百度地图的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