【baidu-map】 vue百度地图插件使用

安装

npm install vue-baidu-map --save

---

引入

在main.js

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, { ak: '申请的百度地图key' })

---

初始化地图

<baidu-map class="map" :ak="ak" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler" @zoomend="syncCenterAndZoom"></baidu-map>

• 【class】给baidu-map定义宽高（必写）

 例：

.map {
    width: 100%;
    height: 800px;
}

---

• 【ak】你所申请的百度ak（必写）

• 【center】地图初始化的中心点（必写）

• 【zoom】设置地图的缩放级别

• 【scroll-wheel-zoom】为true时开始鼠标滚轮缩放地图

例：

data() {
    return {
        // 地图
        ak: '申请的百度地图key',
        center: { lng: 0, lat: 0 },
        zoom: 16,
    }
}

---

• @ready="handler"

/** 获取地图 */
handler({ BMap, map }) {
    console.log(BMap, map)
    this.BMap = BMap;
    this.map = map; 
    this.center.lng = 113.30552997040922
    this.center.lat = 22.807159275942844
    this.zoom = 17
}

• @zoomend="syncCenterAndZoom"

/** 鼠标滚轮滚动时 将缩放级别进行存放 */
syncCenterAndZoom (e) {
    this.zoom = e.target.getZoom()
}

---

• @dragend="dragendEvent"

// 监听拖拽地图结束事件，用于地图拖拽后重新定义中心点
dragendEvent(e) {
    const { lng, lat } = e.target.getCenter()
    this.center.lng = lng
    this.center.lat = lat
},