vue使用高德地图实现轨迹回放功能

1.console.amap.com/dev/index 高德官网申请一个自己的key，官网有步骤

2.在vue项目中安装相应依赖

npm i @amap/amap-jsapi-loader --save

3.直接上代码，可以copy直接用

<template>
  <div class="map_app">
    <div id="container"></div>
    <div class="input-card">
      <h4>轨迹回放控制</h4>
      <div class="input-item">
        <input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()" />
        <input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()" />
      </div>
      <div class="input-item">
        <input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()" />
        <input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()" />
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  data() {
    return {
      map: null,
      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]
      ],
      marker: null
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '7146a693b07ac50b3ec96a431972cbe7', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map('container', {
            resizeEnable: true,
            center: [116.397428, 39.90923],
            zoom: 17
          });
          this.marker = new AMap.Marker({
            map: this.map,
            position: [116.478935, 39.997761],
            icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
            offset: new AMap.Pixel(-13, -26)
          });
          const _this = this;
          AMap.plugin('AMap.MoveAnimation', function () {
            // 绘制轨迹
            var polyline = new AMap.Polyline({
              map: _this.map,
              path: _this.lineArr,
              showDir: true,
              strokeColor: '#28F', //线颜色
              // strokeOpacity: 1,     //线透明度
              strokeWeight: 6 //线宽
              // strokeStyle: "solid"  //线样式
            });

            var passedPolyline = new AMap.Polyline({
              map: _this.map,
              // path: lineArr,
              strokeColor: '#AF5', //线颜色
              // strokeOpacity: 1,     //线透明度
              strokeWeight: 6 //线宽
              // strokeStyle: "solid"  //线样式
            });

            _this.marker.on('moving', function (e) {
              polyline.setPath(e.passedPath);
            });
            _this.map.setFitView();
            const that = _this;
            // 开始动画
            window.startAnimation = function startAnimation() {
              that.marker.moveAlong(that.lineArr, {
                // 每一段的时长
                duration: 500,
                // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                autoRotation: true
              });
            };
            //  暂停动画
            window.pauseAnimation = function pauseAnimation() {
              that.marker.pauseMove();
            };
            //  继续动画
            window.resumeAnimation = function resumeAnimation() {
              that.marker.resumeMove();
            };
            //  停止动画
            window.stopAnimation = function stopAnimation() {
              that.marker.stopMove();
            };
          });
        })
        .catch((e) => {
          console.log(e);
        });
    }
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  }
};
</script>
<style lang="scss" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 500px;
  #myPageTop {
    position: absolute;
    z-index: 9999;
    top: 20px;
    right: 50px;
    .el-input {
      .el-input__inner {
        border-radius: 5px;
      }
    }
  }
}
.map_table {
  width: 100%;
  height: 100px;
}
</style>

效果图：