vue-bmap-gl 是一个基于vue和百度地图GL版本封装的vue地图组件库，提供了常用组件封装。
本次更新
- 组件全面升级支持vue3
- 代码使用typescript重写
- 增加IDE提示文件，快捷开发
- 文档全面更新，使用vuepress 2.0版本重新编写。文档地址
- 支持treeshake
破坏性变更
- 库加载方式调整，需使用vue3的方式进行注册库
- infoWindow的visible属性不再支持.sync使用，需要调整为v-model:visible
- 移除bmapManager，获取地图实例的方式将只支持ref和绑定init事件
- 移除所有组件events属性，事件绑定使用v-on形式
NPM安装
npm install vue-bmap-gl@next --save
引入组件
import App from './App.vue'
import VueBMap, {initBMapApiLoader} from 'vue-bmap-gl';
import 'vue-bmap-gl/dist/style.css'
initBMapApiLoader({
ak: 'YOUR_KEY'
})
createApp(App)
.use(VueBMap)
.mount('#app')
示例
<template>
<div class="bmap-page-container">
<el-bmap
ref="map"
:lazy="2000"
:map-style-v2="darkStyle"
:preserve-drawing-buffer="true"
:min-zoom="10"
:max-zoom="22"
:tilt="tilt"
:heading="heading"
:center="center"
:zoom="zoom"
,@click="click"
@tilesloaded="tilesloaded"
/>
</div>
<div class="control-container">
<button @click="getMap()">
获取地图示例
</button>
</div>
</template>
<script lang="ts">
import {defineComponent} from "vue";
import darkStyle from '../../../assets/mapStyle'
export default defineComponent({
data() {
return {
zoom: 16,
center: [121.59996, 31.197646],
tilt: 60,
heading: 0,
darkStyle,
timer: null,
};
},
mounted() {
const change = () =>{
clearTimeout(this.timer);
window.removeEventListener('hashchange',change)
}
window.addEventListener('hashchange',change)
},
methods: {
getMap() {
// bmap vue component
// 百度 map instance
console.log(this.$refs.map.$$getInstance());
},
panMap() {
this.timer = setTimeout( () => {
this.center = [(this.center[0]+0.0001), this.center[1]];
this.panMap();
},1000);
},
click(){
alert('map clicked');
},
tilesloaded(e){
console.log('tilesloaded')
}
}
})
</script>
