uniapp地图轨迹回放

利用uniapp自带的map组件，实现小程序的轨迹回放。

附上效果图

轨迹回放

完整代码附上，

<template>
	<view class="pageBox">
		<view class="video">
			<map id="myMap" style="width: 100%; height: 100vh;position: relative;" :latitude="latitude"
				:longitude="longitude" :scale="mapscale" :markers="markers" :enable-3D="true"
				:enable-satellite='weiXing' :show-location="true" @tap="mapTap" :polyline="polyline"
				@loaded="onMapLoaded">
			</map>
		</view>
	</view>
</template>

<script>
	import {
		historyList
	} from '@/Api/setApi.js'
	export default {
		data() {
			return {
				equipmentId: '',
				title: 'map',
				latitude: 0,
				longitude: 0,
				mapscale: 14,
				markers: [{
						id: 1,
						latitude: 0,
						longitude: 0,
						iconPath: '/static/imgs/che.png',
						width: 20,
						height: 20,
						callout: {
							display: 'ALWAYS',
						}
					},
					{
						id: 2,
						latitude: 30.125712999999983,
						longitude: 104.138703000,
						iconPath: '/static/imgs/che.png',
						width: 20,
						height: 20,
					},
				],
				polyline: [{
					points: [{
							latitude: 0,
							longitude: 0
						}, {
							latitude: 34.37290581917907,
							longitude: 108.9089576622622
						},
						{
							latitude: 30.310061,
							longitude: 103.853111
						}, {
							latitude: 30.288234,
							longitude: 103.855925
						}, {
							latitude: 30.282484,
							longitude: 103.847576
						}, {
							latitude: 30.283333000000002,
							longitude: 103.84442200000001
						}, {
							latitude: 30.283913,
							longitude: 103.84553100000001
						}, {
							latitude: 30.259978,
							longitude: 103.84369100000002
						}, {
							latitude: 30.194962,
							longitude: 103.85261300000002
						}, {
							latitude: 30.143625,
							longitude: 103.83492600000002
						}, {
							latitude: 30.136818,
							longitude: 103.83149500000003
						}, {
							latitude: 30.14239,
							longitude: 103.84888500000002
						}, {
							latitude: 30.144589999999997,
							longitude: 103.89636300000002
						}, {
							latitude: 30.151256,
							longitude: 103.92347700000002
						}, {
							latitude: 30.151757999999997,
							longitude: 103.94075500000002
						}, {
							latitude: 30.157115999999995,
							longitude: 103.96360500000003
						}, {
							latitude: 30.15249799999999,
							longitude: 103.99854300000003
						}, {
							latitude: 30.152058999999987,
							longitude: 104.02549100000002
						}, {
							latitude: 30.15251399999999,
							longitude: 104.04668500000001
						}, {
							latitude: 30.154654999999984,
							longitude: 104.06263100000002
						}, {
							latitude: 30.153094999999986,
							longitude: 104.09928400000004
						}, {
							latitude: 30.149353999999985,
							longitude: 104.10693200000004
						}, {
							latitude: 30.134693999999982,
							longitude: 104.11776400000004
						}, {
							latitude: 30.130534999999984,
							longitude: 104.12807600000004
						}, {
							latitude: 30.125712999999983,
							longitude: 104.138703000
						}
					],
					color: "#FF0000DD",
					width: 3,
					dottedLine: false
				}],
				includePoints: [],  地图展示范围
				weiXing: false,
				wxInx: 0,
				numInx: 1,
				mapContext: null,
				ids: '',
				end: '',
				start: ''
			}
		},
		onReady() {
			this.changeNavStyle()
		},
		onLoad(e) {
			console.log(e);
			this.equipmentId = e.id
			this.ids = e.ids
			this.end = e.end
			this.start = e.start
		},
		onShow() {
			this.weiZhi()
			this.historyListFun()
		},
		methods: {
			onMapLoaded() {
				this.mapContext = uni.createMapContext('myMap', this);
				// 在地图加载完成后，将地图的中心点设置为标记的位置
				this.mapContext.includePoints({
					points: [{
						latitude: 34.76366702735541,
						longitude: 113.63258255557685,
					}],
					// padding: [50]
				});
			},
			// 获取历史轨迹
			historyListFun() {
				historyList({
					device_id: this.ids,
					addtime: this.start,
					endtime: this.end,
				}).then(res => {})
			},
			mapTap(e) {
				console.log(e, 'klkl');
			},
			translateMarkerFun(id) {
				let that = this
				let mpCtx = uni.createMapContext('myMap')
				mpCtx.includePoints({
					points: [{
							latitude: that.markers[0].latitude,
							longitude: that.markers[0].longitude
						},
						{
							latitude: 30.125712999999983,
							longitude: 104.138703000
						},
					],
					padding: [50, 50, 50, 50], // 地图视野调整的边距
				});
				mpCtx.moveAlong({
					markerId: id,
					path: [{
							latitude: that.markers[0].latitude,
							longitude: that.markers[0].longitude
						}, {
							latitude: 34.37290581917907,
							longitude: 108.9089576622622
						},{
							latitude: 30.310061,
							longitude: 103.853111
						}, 
						{
							latitude: 30.288234,
							longitude: 103.855925
						}, {
							latitude: 30.282484,
							longitude: 103.847576
						}, {
							latitude: 30.283333000000002,
							longitude: 103.84442200000001
						}, {
							latitude: 30.283913,
							longitude: 103.84553100000001
						}, {
							latitude: 30.259978,
							longitude: 103.84369100000002
						}, {
							latitude: 30.194962,
							longitude: 103.85261300000002
						}, {
							latitude: 30.143625,
							longitude: 103.83492600000002
						}, {
							latitude: 30.136818,
							longitude: 103.83149500000003
						}, {
							latitude: 30.14239,
							longitude: 103.84888500000002
						}, {
							latitude: 30.144589999999997,
							longitude: 103.89636300000002
						}, {
							latitude: 30.151256,
							longitude: 103.92347700000002
						}, {
							latitude: 30.151757999999997,
							longitude: 103.94075500000002
						}, {
							latitude: 30.157115999999995,
							longitude: 103.96360500000003
						}, {
							latitude: 30.15249799999999,
							longitude: 103.99854300000003
						}, {
							latitude: 30.152058999999987,
							longitude: 104.02549100000002
						}, {
							latitude: 30.15251399999999,
							longitude: 104.04668500000001
						}, {
							latitude: 30.154654999999984,
							longitude: 104.06263100000002
						}, {
							latitude: 30.153094999999986,
							longitude: 104.09928400000004
						}, {
							latitude: 30.149353999999985,
							longitude: 104.10693200000004
						}, {
							latitude: 30.134693999999982,
							longitude: 104.11776400000004
						}, {
							latitude: 30.130534999999984,
							longitude: 104.12807600000004
						}, {
							latitude: 30.125712999999983,
							longitude: 104.138703000
						}
					],
					autoRotate: true, // 标记点是否自动旋转方向
					duration: 60000, // 动画持续时间，单位为毫秒
				})
				this.$forceUpdate();
			},
			weiZhi() {
				let that = this
				uni.getLocation({
					type: 'gcj02  ', // 返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.latitude = 30.31013,
							that.longitude = 103.85311
						// that.longitude = res.longitude
						// that.latitude = res.latitude
						that.markers[0].longitude = res.longitude
						that.markers[0].latitude = res.latitude
						// that.markers[1].longitude = res.longitude
						// that.markers[1].latitude = res.latitude + 0.02

						that.polyline[0].points[0].longitude = res.longitude
						that.polyline[0].points[0].latitude = res.latitude
						// that.polyline[0].points[1].longitude = res.longitude
						// that.polyline[0].points[1].latitude = res.latitude + 0.02
						that.translateMarkerFun(1)
					},
					fail: function(res) {
						console.log(res);
					}
				});
			},
			//自定义导航栏，
			changeNavStyle() {
				this.navBackgroundColor = '#ff0000';
				uni.setNavigationBarTitle({
					title: '设备编号：' + this.equipmentId
				});
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#318cff'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pageBox {
		display: flex;
		flex-direction: column;
	}

	.tit {
		background-color: #318CFF;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
	}

	.video {
		background-color: #ebebeb;
		height: calc(100vh - 80rpx);
		// #ifdef H5
		height: calc(100vh - 168rpx);
		//#endif
	}
</style>