1貌夕、安裝
$ npm install vue-baidu-map --save?
2、main.js引入
import?Vue?from?'vue'
import?BaiduMap?from?'vue-baidu-map'
Vue.use(BaiduMap,?{
??ak:?'百度地圖開發(fā)者平臺(tái)申請(qǐng)的密鑰'
})
3踊挠、使用
<template>
????????<baidu-map class="bm-view"
? ? ? ? :center="center"? ?//中心
? ??????:zoom="zoom" //縮放等級(jí)
? ??????:scroll-wheel-zoom='true'? //允許滾輪縮放
????????>
? ? ? ? ? ? ? ? ?<!--?定位控件 -->
? ??????????????<bm-geolocation
? ??????????????????????anchor="BMAP_ANCHOR_BOTTOM_RIGHT"? //控件的位置
? ? ? ? ? ? ? ? ? ? ? ? ?:showAddressBar="true"? //定位信息面板
? ? ? ? ? ? ? ? ? ? ? ? ?:autoLocation="true"
? ???????????????????????:locationIcon="{url:?require('../assets/logo.png'),?size:?{width:?46,?height:?46},opts:?{imageSize:?{width:?46,?height:?46},?}}"? //自定義定位中心點(diǎn)的Icon樣式
? ???????????????????????@locationSuccess='locationSuccess'? ?//定位成功后調(diào)用的方法 返回值有?point, AddressComponent, marker? 可拿到當(dāng)前位置信息
? ? ? ? ? ? ? ? ? </bm-geolocation>
? ? ? ?</baidu-map>
</template>
<script>
export?default?{
??????data?()?{
? ??????????return?{
? ??????????????????center:?{lng:?0,?lat:?0},
? ? ? ? ? ? ? ? ? ? ?zoom:?15，
? ? ? ? ? ? ?}
? ? ? ?}
}
</script>
<style>
.bm-view {
????width: 100%; height: 300px;
}
?</style>
4冲杀、基本地圖已經(jīng)出來效床，后續(xù)其他控件及功能待更新，詳細(xì)請(qǐng)閱讀官方文檔
