高德地图使用-车辆轨迹

Posted 2022-12-23 不靠谱的作曲家

效果如图

获取线路坐标的工具

AMap.plugin('AMap.MoveAnimation', function () 
	// 线路的坐标点
	var lineArr = [
		[118.87044801, 31.94109066],
		[118.87174408, 31.9413029],
		[118.87351764, 31.94161163],
		[118.87504109, 31.94188176],
		[118.87549585, 31.94212295],
		[118.87532532, 31.94256674],
		[118.87506383, 31.9432903],
		[118.87476824, 31.94401386],
		[118.87440443, 31.944612],
		[118.87425663, 31.94507507],
		[118.8740861, 31.94528732],
		[118.8730174, 31.94500754],
		[118.87234662, 31.94503648],
		[118.87158489, 31.94508472],
		[118.87012964, 31.94513296],
		[118.86974309, 31.94505578],
		[118.86970899, 31.94469882],
		[118.8698568, 31.9438402],
		[118.87007282, 31.94294299],
		[118.87008419, 31.94248955],
		[118.86970901, 31.94234484],
		[118.86911783, 31.9423159],
		[118.86870854, 31.94223872],
		[118.86866306, 31.94236414],
		[118.86864032, 31.94237378]
	];
	
	// 绘制线路轨迹
	var polyline = new AMap.Polyline(
		map: map,
		path: lineArr,
		showDir: true,
		strokeColor: "#28F", //线颜色
		strokeOpacity: 0.5, //线透明度
		strokeWeight: 6, //线宽
		strokeStyle: "solid" //线样式
	);
	
	// 车辆的起始位置
	marker = new AMap.Marker(
		map: map,
		position: [118.87044801, 31.94109066],
		icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
		offset: new AMap.Pixel(-13, -26),
	);
	
	// 绑定点击事件可让小车运动
	window.startAnimation = function startAnimation() 
		marker.moveAlong(lineArr, 
			duration: 1000, //可根据实际采集时间间隔设置
			// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
			autoRotation: true,
			circlable: false //是否循环动画
		);
	;
)