vue-js-track-map

百度/高德地图API基于vue的鹰眼轨迹图

Usage no npm install needed!

<script type="module">
  import vueJsTrackMap from 'https://cdn.skypack.dev/vue-js-track-map';
</script>

README

百度地图轨迹动画

仅支持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>

属性

名称 释义 类型 取值 默认值
ak 百度地图服务密钥 string - -
https 是否允许加载https文件 boolean true/false true
width 地图宽度 string - 800px
height 地图高度 string - 400px
path 轨迹数组集合 Array [ { lng: '', lat: '' } ] []
trackOptions 轨迹运行配置项 Object 详见:https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/trackAnimation []
strokeColor 轨迹路线填充颜色 String 颜色值 #409eff
icon 图标路径 String *.png/*.jpg/*.svg -
iconWidth 图标宽度 Number - 26
iconHeight 图标高度 Number - 13
iconLabel 图标上方跟随的文本框信息 String - -
iconSpeed 图标跟随轨迹速度 Number - 300
centerZoom 地图缩放级别 Number - 17

事件

名称 释义 类型 参数
ready 地图加载完成的回调函数 void function(Bmap, BMapGL, BMapGLLib)...
Bmap: 地图实例
BMapGL: window.BMapGL
BMapGLLib: window.BMapGLLib

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

<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工具库中TrackAnimationLushu类实现,TrackAnimation本身做轨迹动画会有所卡顿,这个无法避免,所以可能会导致轨迹运行动画和图标动画不一致的情况,目前可通过设置iconSpeedtrackOptions中的durationdelay来调整。

链接

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