vue-amap中使用官方轨迹回放功能

// vue-amap中使用官方轨迹回放功能
<template>
    <div class="page">
        <div>MAP TRACK</div>
        <div class="map-container">
            <el-amap :center="center"
                     :amap-manager="amapManager"
                     :zoom="zoom"
                     :plugins="plugins"
                     :events="events"
                     :resize-enable="true"
                     class="map">
            </el-amap>
        </div>
        <div class="toolbar">
            <van-button @click="checkLoad()">轨迹回放</van-button>
        </div>
    </div>
</template>

<script>
  import {AMapManager, lazyAMapApiLoaderInstance} from 'vue-amap';

  const amapManager = new AMapManager();
  export default {
    name: 'MapTrack',
    components: {},
    data() {
      return {
        zoom: 15,
        center: [116.478935, 39.997761],
        plugins: [],
        amapManager,
        events: {
          init(map) {
            console.log('map init ok', map);
          }
        }
      }
    },
    mounted() {
    },
    methods: {
      checkLoad() {
        lazyAMapApiLoaderInstance.load().then(() => {
          this.startTrack();
        })
      },
      startTrack() {
        let map = amapManager.getMap();

        // 轨迹点
        const lineArr = [
          [116.478935, 39.997761],
          [116.478939, 39.997825],
          [116.478912, 39.998549],
          [116.478912, 39.998549],
          [116.478998, 39.998555],
          [116.478998, 39.998555],
          [116.479282, 39.99856],
          [116.479658, 39.998528],
          [116.480151, 39.998453],
          [116.480784, 39.998302],
          [116.480784, 39.998302],
          [116.481149, 39.998184],
          [116.481573, 39.997997],
          [116.481863, 39.997846],
          [116.482072, 39.997718],
          [116.482362, 39.997718],
          [116.483633, 39.998935],
          [116.48367, 39.998968],
          [116.484648, 39.999861],
        ];
        // 创建主体
        let marker = new AMap.Marker({
          map: map,
          position: [116.478935, 39.997761],
          icon: "https://webapi.amap.com/images/car.png",
          offset: new AMap.Pixel(-26, -13),
          autoRotation: true,
          angle: -90,
        });

        // 绘制轨迹
        let polyline = new AMap.Polyline({
          map: map,
          path: lineArr,
          showDir: true,
          strokeColor: "#28F",  //线颜色
          strokeWeight: 6,      //线宽
          strokeOpacity: 1,     //线透明度
          strokeStyle: "solid"  //线样式
        });

        // 回执经过的轨迹
        let passedPolyline = new AMap.Polyline({
          map: map,
          strokeColor: "#AF5",  //线颜色
          strokeWeight: 6,      //线宽
        });

        //经过轨迹的更新
        marker.on('moving', function (e) {
          passedPolyline.setPath(e.passedPath);
        });

        // 自动适配视图
        map.setFitView();

        // 开始沿坐标移动
        marker.moveAlong(lineArr, 200);
      }
    },
  }
</script>

<style scoped lang="stylus">
    .map-container
        background #2ac1bb
        margin 12px
        .map
            height 600px
</style>