百度地图轨迹动画

仅支持Vue2.0版本，支持Typescript,不支持Vue3.0，

点此进入高德地图版本轨迹动画文档

安装

npm install vue-js-track-map -S

引入

import Vue from "vue";
import { TrajectoryAnimation } from "vue-js-track-map";

// 全局组件
Vue.component(TrajectoryAnimation.name, TrajectoryAnimation);

// 局部组件
<template>
  <TrajectoryAnimation @ready="mapReady" ak="XXXXXXX" />
</template>
<script>
  export default {
    name: 'demo',
    components: {
      TrajectoryAnimation
    },
    methods: {
      mapReady(mapInstance, BMapGL, BMapGLLib) {
        console.log(mapInstance);
      }
    }
  }
</script>

属性

事件

轨迹动画开始、暂停、继续; 显示/隐藏信息提示框

<template>
  <div>
    <TrajectoryAnimation ref="map" iconLabel="提示框文本" @ready="mapReady" ak="XXXXXXX" />
    <div>
      <button @click="start">开始</button>
      <button @click="pause">暂停</button>
      <button @click="stop">停止</button>
      <button @click="showInfo">显示信息框</button>
      <button @click="hideInfo">隐藏信息框</button>
    </div>
  </div>
</template>
<script>
  import { TrajectoryAnimation } from "vue-js-track-map";
  export default {
    name: 'demo',
    components: {
      TrajectoryAnimation
    },
    methods: {
      mapReady(mapInstance, BMapGL, BMapGLLib) {
        console.log(mapInstance);
      },
      // 开始
      start() {
        this.$refs.bmap.startTrackAnimation();
      },
      // 暂停
      pause() {
        this.$refs.bmap.pauseTrackAnimation();
      },
      // 继续
      stop() {
        this.$refs.bmap.stopTrackAnimation();
      },
      showInfo(){
        this.$refs.bmap.showInfoWindow();
      },
      hideInfo(){
        this.$refs.bmap.hideInfoWindow();
      }
    }
  }
</script>

已知问题

这个轨迹动画是结合BMapGLLib工具库中TrackAnimation 和 Lushu类实现，TrackAnimation本身做轨迹动画会有所卡顿，这个无法避免，所以可能会导致轨迹运行动画和图标动画不一致的情况，目前可通过设置iconSpeed和trackOptions中的duration和delay来调整。

链接

BMapGLLib: https://github.com/huiyan-fe/BMapGLLib

百度地图TrackAnimation示例: https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/trackAnimation

百度地图Lushu示例: https://bj.bcebos.com/v1/mapopen/github/BMapGLLib/Lushu/examples/index.html