高德地图 - 轨迹回放，消息框内展示车辆信息且随车辆移动

风轻轻~

已于 2022-06-30 14:50:29 修改

阅读量3.5k

点赞数 6

分类专栏： # 地图__高德API 文章标签：高德api

于 2021-12-14 15:38:23 首次发布

本文链接：https://blog.csdn.net/Jie_1997/article/details/121928452

版权

地图__高德API 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

高德API 示例：https://lbs.amap.com/demo/javascript-api/example/marker/replaying-historical-running-data

效果展示

在这里插入图片描述

代码

<html>
	<head>
		<title>高德地图轨迹回放，消息框内展示车辆信息且随车辆移动</title>
		<script src="https://webapi.amap.com/maps?v=1.4.15&key=高德KEY&plugin=AMap.Autocomplete,AMap.Walking,AMap.PlaceSearch,AMap.PolyEditor,AMap.CircleEditor,AMap.Transfer,AMap.Driving,AMap.CitySearch,AMap.Heatmap,AMap.Size" type="text/javascript"></script>
		<style>
			.amap-info-content {
			  background: rgb(255 255 255 / 80%);
			  padding: 0;
			  max-width: 500px;
			}
		</style>
	</head>
	<body>
		<div id="map" style="height: 100%;width: 100%;"></div>
	</body>
	<script type="text/javascript">
		// 车辆轨迹、速度数据
		var routeInfo = [
			{"line":8,"carID":"苏A12345","lng":116.494194,"lat":39.860557,"speed":30},
			{"line":8,"carID":"苏A12345","lng":116.495077,"lat":39.862905,"speed":50},
			{"line":8,"carID":"苏A12345","lng":116.499261,"lat":39.864356,"speed":60},
			{"line":8,"carID":"苏A12345","lng":116.499237,"lat":39.868669,"speed":80},
			{"line":8,"carID":"苏A12345","lng":116.503616,"lat":39.869087,"speed":65},
			{"line":8,"carID":"苏A12345","lng":116.474086,"lat":39.870166,"speed":58},
			{"line":8,"carID":"苏A12345","lng":116.468884,"lat":39.870064,"speed":65},
			{"line":8,"carID":"苏A12345","lng":116.462335,"lat":39.870078,"speed":30},
			{"line":8,"carID":"苏A12345","lng":116.461624,"lat":39.872833,"speed":52},
			{"line":8,"carID":"苏A12345","lng":116.461627,"lat":39.877947,"speed":45},
			{"line":8,"carID":"苏A12345","lng":116.461632,"lat":39.881769,"speed":35},
			{"line":8,"carID":"苏A12345","lng":116.457642,"lat":39.883115,"speed":62},
			{"line":8,"carID":"苏A12345","lng":116.447154,"lat":39.883221,"speed":64},
			{"line":8,"carID":"苏A12345","lng":116.443365,"lat":39.883269,"speed":65},
			{"line":8,"carID":"苏A12345","lng":116.432155,"lat":39.880002,"speed":85},
			{"line":8,"carID":"苏A12345","lng":116.42942,"lat":39.879921,"speed":65},
			{"line":8,"carID":"苏A12345","lng":116.425232,"lat":39.883192,"speed":75},
			{"line":8,"carID":"苏A12345","lng":116.424798,"lat":39.887426,"speed":54},
			{"line":8,"carID":"苏A12345","lng":116.422654,"lat":39.890287,"speed":56},
			{"line":8,"carID":"苏A12345","lng":116.424754,"lat":39.892178,"speed":57},
			{"line":8,"carID":"苏A12345","lng":116.427618,"lat":39.892229,"speed":79},
			{"line":8,"carID":"苏A12345","lng":116.433014,"lat":39.895262,"speed":35},
			{"line":8,"carID":"苏A12345","lng":116.428498,"lat":39.896307,"speed":37},
			{"line":8,"carID":"苏A12345","lng":116.423869,"lat":39.896099,"speed":47},
			{"line":8,"carID":"苏A12345","lng":116.414179,"lat":39.895848,"speed":68},
			{"line":8,"carID":"苏A12345","lng":116.408911,"lat":39.899697,"speed":64},
			{"line":8,"carID":"苏A12345","lng":116.398841,"lat":39.899396,"speed":63},
			{"line":8,"carID":"苏A12345","lng":116.395979,"lat":39.89924,"speed":55},
			{"line":8,"carID":"苏A12345","lng":116.390074,"lat":39.898063,"speed":66}
		]
		// 1. 创建地图
		var map = new AMap.Map("map", {
			zoom: 13,
			view: new AMap.View2D({
			}),
			lang: "zh_cn"
		});

		// 2.创建小汽车marker
		var carMarker = new AMap.Marker({
			map: map,
			position: [routeInfo[0].lng, routeInfo[0].lat],
			icon: "http://webapi.amap.com/images/car.png",
			offset: new AMap.Pixel(-26, -13),
			autoRotation: true
		});

		// 3.创建跟速度信息展示框
		var carWindow = new AMap.InfoWindow({
			offset: new AMap.Pixel(6, -25),
			content: ""
		});

		// 4.生成车辆回放轨迹
		var pathPolyline = initializePaths(routeInfo);

		// 5.车辆随轨迹移动
		carMarker.moveAlong(pathPolyline.getPath(), 1000, function (k) {
			return k
		}, false);
		
		  // 车辆经过路线样式
		  let lineArr = [];
		  routeInfo.forEach((item) => {
			lineArr.push([item.lng, item.lat]);
		  });
		  var passedPolyline = new AMap.Polyline({
			map: map,
			path: lineArr,
			strokeColor: "#AF5", //线颜色
			strokeOpacity: 1,     //线透明度
			strokeWeight: 6, //线宽
			strokeStyle: "solid"  //线样式
		  });
		// 6.速度框随车辆移动
		AMap.event.addListener(carMarker, 'moving', function (e) {
			passedPolyline.setPath(e.passedPath);
			var lastLocation = e.passedPath[e.passedPath.length - 1];
			carWindow.setPosition(lastLocation);
			setVehicleSpeedInWidowns(lastLocation);
		});

		// 7.打开速度框
		carWindow.open(map, carMarker.getPosition());

		// 8.地图自适应缩放
		map.setFitView();


		function initializePaths(paths) {
			var line;
			var pathLngLatArray = new Array();
			if (paths) {
				for (var i = 0; i < paths.length; i++) {
					pathLngLatArray.push(new AMap.LngLat(paths[i].lng, paths[i].lat));
				}
				line = new AMap.Polyline({
					map: map,
					path: pathLngLatArray,
					strokeColor: 'red',
					strokeOpacity: 0.8,
					strokeWeight: 6,
					strokeStyle: 'solid'
				});
				line.setMap(map);
			}
			return line;
		}
		function setVehicleSpeedInWidowns(lnglat) {
			for (var i = 0; i < routeInfo.length; i++) {
				let content = `
					<div style="background: #000;color: #fff;padding: 8px 25px 8px 5px;font-size: 14px;">${routeInfo[i].carID}</div>
					<div style="padding: 0 10px;line-height: 25px;font-size: 14px;">
						<div>所在线路：${routeInfo[i].line}</div>
						<div>所在经度：${routeInfo[i].lng}</div>
						<div>所在纬度：${routeInfo[i].lat}</div>
						<div>速度：${routeInfo[i].speed.toFixed(2)} KM/h</div>
					</div>
				`;
				if (lnglat.distance(new AMap.LngLat(routeInfo[i].lng, routeInfo[i].lat)) < 4) {
					carWindow.setContent(content);
					return;
				}
			}
		}
	</script>
</html>