【腾讯地图】轨迹回放分段_demo

效果

代码

html 复制代码
<!-- 台州勤务督查 - 轨迹回放优化 - 轨迹回放每个时间点与实际吻合 -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>marker轨迹回放-全局模式</title>
	</head>
	<script
		charset="utf-8"
		src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
	></script>
	<style type="text/css">
		html,
		body {
			height: 100%;
			margin: 0px;
			padding: 0px;
			overflow: hidden;
		}

		#container {
			position: relative;
			width: 100%;
			height: 100%;
		}
	</style>

	<body>
		<div id="container"></div>
		<script type="text/javascript">
			var center = new TMap.LatLng(39.984104, 116.307503)
			// 初始化地图
			var map = new TMap.Map('container', {
				zoom: 15,
				center: center,
			})

			var path = [
				new TMap.LatLng(39.98481500648338, 116.30571126937866),
				new TMap.LatLng(39.982266575222155, 116.30596876144409),
				new TMap.LatLng(39.982348784165886, 116.3111400604248),
				new TMap.LatLng(39.978813710266024, 116.3111400604248),
				new TMap.LatLng(39.978813710266024, 116.31699800491333),
			]

			var polylineLayer = new TMap.MultiPolyline({
				map, // 绘制到目标地图
				// 折线样式定义
				styles: {
					style_blue: new TMap.PolylineStyle({
						color: '#3777FF', // 线填充色
						width: 4, // 折线宽度
						borderWidth: 2, // 边线宽度
						borderColor: '#FFF', // 边线颜色
						lineCap: 'round', // 线端头方式
						eraseColor: 'rgba(190,188,188,1)',
					}),
				},
				geometries: [
					{
						id: 'erasePath',
						styleId: 'style_blue',
						paths: path,
					},
				],
			})

			var marker = new TMap.MultiMarker({
				map,
				styles: {
					'car-down': new TMap.MarkerStyle({
						width: 40,
						height: 40,
						anchor: {
							x: 20,
							y: 20,
						},
						faceTo: 'map',
						rotate: 180,
						src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
					}),
					start: new TMap.MarkerStyle({
						width: 25,
						height: 35,
						anchor: { x: 16, y: 32 },
						src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',
					}),
					end: new TMap.MarkerStyle({
						width: 25,
						height: 35,
						anchor: { x: 16, y: 32 },
						src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',
					}),
				},
				geometries: [
					{
						id: 'car',
						styleId: 'car-down',
						position: new TMap.LatLng(39.98481500648338, 116.30571126937866),
					},
					{
						id: 'start',
						styleId: 'start',
						position: new TMap.LatLng(39.98481500648338, 116.30571126937866),
					},
					{
						id: 'end',
						styleId: 'end',
						position: new TMap.LatLng(39.978813710266024, 116.31699800491333),
					},
				],
			})
			// 使用marker 移动接口， https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker

			move(path.slice(0, 2))
			let index = 0
			let alreadyPoint = []
			function move(pathRange) {
				marker.moveAlong(
					{
						car: {
							path: pathRange, // 把所有轨迹分成N个小段，一段一段走
							speed: 250,
						},
					},
					{
						autoRotation: true,
					}
				)
			}
			marker.on('moving', e => {
				var passedLatLngs = e.car && e.car.passedLatLngs
				passedLatLngs.unshift(...alreadyPoint) // 将已经走过的轨迹段点位加进来
				console.log('passedLatLngs----', passedLatLngs)
				if (passedLatLngs) {
					// 使用路线擦除接口 eraseTo, https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector
					polylineLayer.eraseTo(
						'erasePath',
						passedLatLngs.length - 1, // 走向下一个点，下一个点的索引
						passedLatLngs[passedLatLngs.length - 1] // 当前点坐标
						//passedLatLngs.length - 1,
						//passedLatLngs[passedLatLngs.length - 1]
					)
				}
			})
			marker.on('move_ended', () => {
				if (index !== 4) {
					console.log('-----')
					alreadyPoint.push(path.slice(0, 1))
					move(path.slice(1, 5))

					index = 4
				}
			})
		</script>
	</body>
</html>