uni-app 小程序地图轨迹回放

<template>
	<view class="ditu travleMap">
			<map id="map3" style="height: 100%;width: 100%;" :zoom="zoom" :scale="scale" :latitude="latitude" 
				:longitude="longitude"  :markers="getTraverMarkers" :polyline="travlePolyline2"></map>
			<view class="playTravel">
				<view>
					<img @click="mapPlayTrack"
						src="https://ludingding-oss.oss-cn-chengdu.aliyuncs.com/static/img/historicalAllPlayIcon.png"
						alt="" />
					<slider value="sliderValue" />
					<view class="sliderCon">
						<view class="times-show" @tap="showSpeedList = true">{{ timeSpeed }}x</view>
						<view class="speedList" v-show="showSpeedList">
							<ul>
								<li @click="changeSpeed(item)" v-for="(item, index) in speedList"
									:class="{ activeSpeed: timeSpeed == item }">{{ item }}x</li>
							</ul>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

		/**
		 * @param {Array} points pint数组 
		 * @param {int} index 当前位置
		 */
		realPaly(points,index){
				this.mapContext = uni.createMapContext("map3",this)
				if(index >= points.length) return
				let currentPoint =  points[index+1]
				let nextPoint = points[index+1]
				this.mapContext.translateMarker({
					markerId:2,
					destination:{
						longitude:nextPoint.longitude ,
						latitude: nextPoint.latitude,         
						},
					autoRotate:true,
					//获取两个点需要的播放时间
					duration: this.getMillSesstion(currentPoint,nextPoint) ,
					animationEnd:()=>{
						this.latitude = this.traverMarkers[1].latitude
						this.longitude = this.traverMarkers[1].longitude
						this.realPaly(points,index+1)
					}
				})	
			}

核心逻辑，递归移动到下个点，直到结束
还有一个进度条，大概想法是根据第一个点到下一个点的时间，记录下个点进度条的刻度，在移动到这个点时，给刻度值
进度条拖动逻辑一致，也是根据拖动到的刻度，记录出应该到哪 个点，然后从这个点开始递归平移