vue-amap的轨迹回放功能开发

效果截图高德 实际效果一致

画完线条 小车的轨迹数组也添加好了先走下 》》 o1.setFitView();

核心代码 lazyAMapApiLoaderInstance

pointArr 数据

小车图标可以绑定到events中

  events: {
    init: (o) => {
      // 初始化marker展示
      this.marker = new AMap.Marker({
        map: o,
        position: this.pointArr[0],
        icon: "https://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle: -90,
      });
      // 隐藏marker展示
      this.marker.hide()
    }
  },

// 回放
checkLoad() {
  if (this.pointArr.length <= 0) return
  lazyAMapApiLoaderInstance.load().then(() => {
    this.playback();
  })
},
// 回放
playback() {
  let o1 = amapManager.getMap();
  // 显示marker
  this.marker.show()
  // 开始沿坐标移动
  this.marker.moveAlong(this.pointArr, 2000);
  // 自适应窗口
  o1.setFitView();
},