百度地图轨迹动画
仅支持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
工具库中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