vue高德地图实现播放暂停功能，支持快进快退，播放倍数设置

高德地图实现具体功能如图

具体实现思路如下:

<div class="playAnimation">
            <table width="100%" style="" border="0">
                <tr class="info_play">
                    <td>{{ currentMileage / 10 }} KM / {{ totalMileage / 10 }} KM</td>
                    <td>{{ currentTime }} </td>
                </tr>
                <tr style="padding: 10px 10px;">
                    <td align="center" valign="middle" colspan="2" style="padding-bottom:5px;">
                        <div style="width:100%;text-align: center">
                            <ul class="nav navbar-nav flex" style="width:100%;">
                                <li class="btn"><a id="btn1" class="btn noChoice btn-xs"
                                        @click.prevent="setSpeed(2000)">慢速</a>
                                </li>
                                <li class="btn"><a id="btn2" class="btn noChoice choice btn-xs"
                                        @click.prevent="setSpeed(4000)">正常</a></li>
                                <li @click="handlerRetreat"><i class="el-icon-d-arrow-left play_icon"></i> </li>
                                <li v-if="!runFlag" @click="runFlagChange"><i class="el-icon-video-play play_icon"></i>
                                </li>
                                <li v-if="runFlag" @click="runFlagChange"><i class="el-icon-video-pause play_icon"></i>
                                </li>
                                <li @click="handlerForward"><i class="el-icon-d-arrow-right play_icon"></i> </li>

                                <li class="btn">
                                    <a id="btn3" class="btn noChoice btn-xs" @click.prevent="setSpeed(10000)">快速</a>
                                </li>
                                <li class="btn">
                                    <a id="btn4" class="btn noChoice btn-xs" @click.prevent="setSpeed(100000)">极快</a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

data() {
        return {
            firstArr: [116.397428, 39.90923], // 中心点/初始坐标
            // map: null,
            marker: [],
            infoWindow: [],
            showCardInfo: true,
            travelInfo: false,
            deviceInfo: true,
            waybillDetailsList: {},
            runFlag: false, // 播放/暂停控制
            start: 1,
            playSpeed: 1000,
            travelArr: [],
            len: null, //marker移动中路径数组
            // passline: [], //通过路径的数组
            passline1: [], //未通过路径数组
            currentTime: '',// mark点移动到的当前时间
            totalMileage: 0,// 轨迹总里程
            currentMileage: 0, // 轨迹当前mark点移动里程
            lineArr: [],
            currentSpot: 0,
            isEnd: false,// 标记到达了终点
        }
    },

methods: {
/**
         * 后退
         */
        handlerRetreat() {
            this.currentSpot -= 100;
            if (this.currentSpot > 0) {
                this.marker[0].setPosition([this.passline1[this.currentSpot].lng, this.passline1[this.currentSpot].lat]);
                const data = this.passline1.slice(this.currentSpot, this.passline1.length - 1);
                this.marker[0].moveAlong(data, this.playSpeed);
            } else {
                this.currentSpot = 0;
                this.marker[0].setPosition([this.passline1[0].lng, this.passline1[0].lat]);
                const data = this.passline1.slice(0, this.passline1.length - 1);
                this.marker[0].moveAlong(data, this.playSpeed);
            }
            setTimeout(() => {
                this.runFlag = true;
            }, 10);
        },
        /**
         * 前进
         */
        handlerForward() {
            this.isEnd = false;
            this.currentSpot += 100;
            if (this.currentSpot < this.passline1.length - 1) {
                this.marker[0].setPosition([this.passline1[this.currentSpot].lng, this.passline1[this.currentSpot].lat]);
                const data = this.passline1.slice(this.currentSpot, this.passline1.length - 1);
                this.marker[0].moveAlong(data, this.playSpeed);
            } else {
                this.currentSpot = this.passline1.length - 1;
                this.marker[0].setPosition([this.passline1[this.passline1.length - 1].lng, this.passline1[this.passline1.length - 1].lat]);
                const data = this.passline1.slice(this.passline1.length - 3, this.passline1.length - 1);
                this.marker[0].moveAlong(data, this.playSpeed);
                this.isEnd = true;
            }
            setTimeout(() => {
                this.runFlag = true;
            }, 10);
        },

        /**
         * 播放速度设置
         */
        setSpeed(num) {
            this.runFlag = true;
            this.playSpeed = num;
            this.currentSpot = (this.len - 1);
            this.passline1 = this.passline1.slice(this.currentSpot, this.passline1.length - 1);
            this.marker[0].moveAlong(this.passline1, this.playSpeed);
        },

        /**
         * 播放
         */
        runFlagChange() {
            this.runFlag = !this.runFlag;
            if(this.isEnd){
                this.currentSpot = 0;
            }
            if (this.runFlag) {
                if (this.start === 1) {
                    this.movePrevious();
                    this.start++;
                } else {
                    this.resumeAnimation();
                }
            } else {
                this.pauseAnimation();
            }
        },

        /**
         * 开始动画
         */
        movePrevious() {
            this.travelArr = []
            this.dataInfo.track24s.forEach((ele, index) => {
                this.travelArr.push([ele.longitude, ele.latitude])

            })
            this.passline1 = this.travelArr;

            this.marker[0].moveAlong(this.travelArr, this.playSpeed);
        },

        /**
         * 暂停动画
         */
        pauseAnimation() {
            this.marker[0].pauseMove();
        },

        /**
         * 继续动画
         */
        resumeAnimation() {
            this.marker[0].resumeMove();
        },

        /**
         * 停止动画
         */
        stopAnimation() {
            this.marker[0].stopMove();
        },

}