uni-app实现地图车辆移动轨迹回放

<template>
	<view>
		<view>
			<map id="Map" style="width: 100%; height: 1000px;" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polylines" @markertap="markertap"></map>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markers: [],
				//路线信息
				polylines: [{
					width: 8,
					points: [],
					arrowLine: true,
					color: '#3591FC',
				}],
				latitude: 39.909,//markers没有数据时默认的经纬度北京
				longitude: 116.39742,
				mapContext: null, //地图对象
				IsIsstartMove: false, //是否开始回放
				nextPointIndex: 1, //下一个坐标点
			};
		},
		onReady() {
			//this.test();
			this.getList();
		},
		methods: {
			//标点点击事件，可用于点击标点弹框显示标点详情
			markertap(e) {
				
				let that = this
				var id = e.markerId;

				console.log(id)
			},//根据项目情况
			async getList() {
				await uni.request({
					url: 'https://xxxxx', //请求接口
					method: 'get',
					success: (r) => {
						if (r.data.code == 0) {
							that.markers = r.data.data;
							if (that.markers.length > 0 && that.markers != null) {
								let listArr = []
								//该方法会在每个有经纬度的地方出现标点
								that.markers.map(item => {
									const obj = {
										id: item.id,
										width: 30,
										height: 30,
										//如果有数据就覆盖原有的经纬度
										latitude: that.latitude = item.latitude,
										longitude: that.longitude = item.longitude,
										iconPath: '/static/biaodian.png',
										anchor: {
											x: 0.5,
											y: 1
										}
									}
									listArr.push(obj)
								})
								that.markers = listArr
								// 初始化地图不划线
								that.polylines[0].points = that.markers
								/**
								 * 搜索完成设置路线后自动移动轨迹
								 */
								that.initMap();
								that.handleIsstartMove();
							}
						}
					},
					fail: (err) => {
						return uni.showToast({
							title: "请求接口失败"
						})
					},
				})

			}, //设置地图
			initMap() {
				this.initMarkers()
				//初始化地图
				this.mapContext = uni.createMapContext('Map', this)
			},
			//设置位置（从起点开始）
			initMarkers() {
				this.markers[0].latitude = this.polylines[0].points[0].latitude
				this.markers[0].longitude = this.polylines[0].points[0].longitude
			}, //开始移动
			handleIsstartMove() {
				this.IsstartMove = true
				this.moveMarkers()
			}, //移动坐标
			moveMarkers() {

				this.mapContext.translateMarker({
					markerId: this.markers[0].id,
					destination: {
						latitude: this.polylines[0].points[this.nextPointIndex].latitude,
						longitude: this.polylines[0].points[this.nextPointIndex].longitude
					},
					animationEnd: res => {
						//播放结束，继续移动到下一个点，最后一个点时结束移动
						if (this.nextPointIndex < this.polylines[0].points.length - 1) {
							this.nextPointIndex++
							if (this.IsstartMove) {
								this.moveMarkers()
							}
						} else {
							this.nextPointIndex = 1
							this.IsstartMove = false
						}
					}
				})
			}
		}
	}
</script>

轨迹回放部分代码原创博主