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

月照一江秋水

已于 2022-05-07 14:34:55 修改

阅读量710

点赞数 1

分类专栏： vue 地图文章标签： vue.js

于 2022-04-28 16:22:44 首次发布

本文链接：https://blog.csdn.net/qq_41206597/article/details/124477007

版权

vue 同时被 2 个专栏收录

15 篇文章 2 订阅

订阅专栏

地图

6 篇文章 0 订阅

订阅专栏

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

画完线条小车的轨迹数组也添加好了先走下》》 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();
},