uniapp实现地图轨迹回放

<template>
    <view class="page">
        <map v-if="polyline[0].points.length > 0" id="mymap" style="width: 100%;height: 80vh;"
            :longitude="polyline[0].points[0].longitude" 
            :latitude="polyline[0].points[0].latitude" 
            :markers="makers"
            :polyline="polyline"
            show-location
            show-compass
            enable-3D   
            :include-points="polyline[0].points"></map>
        <view class="">
            <button type="default" v-if="startMove" @click="handleStopMove()">暂停移动</button>
            <button type="default" v-else @click="handleStartMove()">开始移动</button>
            
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                id: 0, // 使用 marker点击事件 需要填写id
                mapContext: null,
                nextPointIndex: 1,      //下一个坐标点的索引
                duratioinTime: 1000, ////相邻两点动画持续时长默认1秒
                makers: [{
                    id: 1,
                    width: 40,
                    height: 40,
                    latitude: 0,
                    longitude: 0,
                    iconPath: 'xxxxxxx,
                    anchor: {
                        x: 0.5,
                        y: 1
                    }
                }],
                polyline: [{
                    width: 8,
                    points: [],
                    arrowLine: true,
                    color: '#3591FC',
                }],
                startMove: false,//是否开启回放
            }
        },
        onLoad() {
            this.getTrack()
            console.log(this.polyline[0].points)
            uni.getLocation({
                type: 'wgs84',
                success: function(res) {
                    console.log(res,'r')
                },
                fail: function(res) {
                    console.log(res,'fail')
                }
            })
        },
        methods: {
            //模拟获取远程数据
            getTrack() {
                this.polyline[0].points = [{
                        latitude: 39.997761,
                        longitude: 116.478935
                    },
                    {
                        latitude: 39.997825,
                        longitude: 116.478939
                    },
                    {
                        latitude: 39.998549,
                        longitude: 116.478912
                    },
                    {
                        latitude: 39.998555,
                        longitude: 116.478998
                    },
                    {
                        latitude: 39.998566,
                        longitude: 116.479282
                    },
                    {
                        latitude: 39.998528,
                        longitude: 116.479658
                    },
                    {
                        latitude: 39.998453,
                        longitude: 116.480151
                    },
                    {
                        latitude: 39.998302,
                        longitude: 116.480784
                    },
                    {
                        latitude: 39.998184,
                        longitude: 116.481149
                    },
                    {
                        latitude: 39.997997,
                        longitude: 116.481573
                    },
                    {
                        latitude: 39.997846,
                        longitude: 116.481863
                    },
                    {
                        latitude: 39.997718,
                        longitude: 116.482072
                    },
                    {
                        latitude: 39.997718,
                        longitude: 116.482362
                    },
                    {
                        latitude: 39.998935,
                        longitude: 116.483633
                    },
                    {
                        latitude: 39.998968,
                        longitude: 116.48367
                    },
                    {
                        latitude: 39.999861,
                        longitude: 116.484648
                    }
                ]
                this.duratioinTime = Math.ceil(3000 / this.polyline[0].points.length) //默认播放全程使用30秒，计算相连两点动画时长
                this.initMapData()

            },
            //设置位置（从起点开始）
            initMakers() {
                this.makers[0].latitude = this.polyline[0].points[0].latitude;
                this.makers[0].longitude = this.polyline[0].points[0].longitude;
            },
            //设置地图
            initMapData() {
                this.initMakers()
                this.mapContext = uni.createMapContext('mymap', this)
            },
            //移动坐标
            movePoint() {
                this.mapContext.translateMarker({
                    duration: this.duratioinTime,
                    markerId:this.makers[0].id,
                    destination: {
                        latitude: this.polyline[0].points[this.nextPointIndex].latitude,
                        longitude: this.polyline[0].points[this.nextPointIndex].longitude
                    },
                    animationEnd: res => {
                        //播放结束，继续移动到下一个点，最后一个点时结束移动
                        if(this.nextPointIndex<this.polyline[0].points.length-1) {
                            this.nextPointIndex ++
                            if(this.startMove) {
                                this.movePoint()
                            }
                        }else {
                            this.nextPointIndex = 1
                            this.startMove = false
                        }

                    }
                })
            },
            //开始移动
            handleStartMove() {
                this.startMove = true
                this.movePoint()
            },
            //暂停移动
            handleStopMove() {
                this.startMove = false
            }
        },
        mounted() {

        }
    }
</script>

<style>

</style>