cnpm i vue-baidu-map --save
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: 'xxxxxxxxxxxxxxxx'
})
<baidu-map
:center="center"
:zoom="zoom"
@moving="syncCenterAndMoving"
@zoomend="syncCenterAndZoom"
:scroll-wheel-zoom="true"
@ready="finish"
class="bm-view">
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
<bm-control :offset="{width: '10px', height: '10px'}">
<bm-auto-complete v-model="center" :sugStyle="{zIndex: 1}">
<el-input v-model="center" ></el-input>
</bm-auto-complete>
</bm-control>
<bm-local-search :keyword="center" :auto-viewport="true" ></bm-local-search>
</baidu-map>
data(){
return{
center:"北京",
zoom: 15,
flag:false
}
}
methods: {
syncCenterAndMoving(e) {
const center = e.target.getCenter();
this.addSession.pharmacyLatitude = center.lat;
this.addSession.pharmacyLongitude = center.lng;
this.zoom = e.target.getZoom()
},
syncCenterAndZoom (e) {
if(this.flag){
this.syncCenterAndMoving(e)
}
},
finish(Bmap,map){
let time = setTimeout(()=>{
this.flag = true
},1000)
}
}
附个链接 https://dafrok.github.io/vue-baidu-map/#/zh/start/base