百度地图(＜baidu-map＞)

• 1 安装

 cnpm i vue-baidu-map --save

• 2 引入

 import Vue from 'vue' 
 import BaiduMap from 'vue-baidu-map'

• 3 use

Vue.use(BaiduMap, {
    // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
    ak: 'xxxxxxxxxxxxxxxx'
  })

• 4 使用

//组件
 <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>

//js
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