import VueBMap from 'vue-bmap-gl';
import 'vue-bmap-gl/dist/style.css'
import VueMapvgl from 'vue-mapvgl';
VueBMap.initBMapApiLoader({
? ak: 'XXXX',
? v: '1.0',
? plugins:'Lushu'
});
plugins地址為/github/BMapGLLib/Lushu/src/Lushu.min.js
並在.eslintrc.js 中配置全局變量
globals: {
BMap: true,
BMapGLLib: true,
? },
使用：
?this.lushu = new BMapGLLib.LuShu(map, points, {
//landmarkPois:此參數是路書移動的時候碰到這個點會觸發pauseTime停留中設置的時間，單位為秒，經緯度誤差超過十米不會停止
// landmarkPois: [
// ? { lng: markers[0].lng, lat: markers[0].lat, html: '<img src="xian.jpg" /></br>西安北站到了', pauseTime: 1 },
// ? { lng: markers[1].lng, lat: markers[1].lat, html: '鹹陽站到了', pauseTime: 1 },
// ? { lng: markers[2].lng, lat: markers[2].lat, html: '鹹陽秦都站到了', pauseTime: 1 },
// ? { lng: markers[3].lng, lat: markers[3].lat, html: '興平站到了', pauseTime: 1 }
// ],
defaultContent: '',
speed: 1000, //速度，單位米每秒
/*?
?* 1、size()是設置圖片大小，圖片過大可以截取
?* 2、anchor是設置偏移，默認是圖片最中間，設置偏移目的是讓圖片底部中間與坐標重合
?*/
icon: new BMapGL.Icon(require('./assets/image/index/car.png'), new BMapGL.Size(56, 56), {
? anchor: new BMapGL.Size(10, 10)
}),
autoView: false,
enableRotation: false
? })
? this.lushu.start()