vue-baidu-map，是Vue的百度地图组件库。
vue-baidu-map官方文档
百度地图JavascriptAPI文档

使用方法：

• 安装
  • NPM - npm install vue-baidu-map --save
  • CDN - <script src="https://unpkg.com/vue-baidu-map"></script>
• 全局注册、使用

import BaiduMap from 'vue-baidu-map'

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

<template>
  <div id="">
    <el-dialog
      title="获取小区经纬度"
      :visible.sync="dialogVisible"
      top="5vh"
      @close="dialogCancle"
      :close-on-click-modal="false"
      :before-close="dialogCancle"
    >
      <baidu-map
        :center="center"
        :zoom="zoom"
        :dragging="true"
        :scroll-wheel-zoom="true"
        class="map"
        @ready="handler"
        @click="getClickInfo"
        @moving="syncCenterAndZoom"
        @moveend="syncCenterAndZoom"
        @zoomend="syncCenterAndZoom"
      >
        <!--    <bm-local-search-->
        <!--            :keyword="keyword"-->
        <!--            :auto-viewport="true"-->
        <!--            :location="location"-->
        <!--    ></bm-local-search>-->
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <!--    <bm-geolocation-->
        <!--            anchor="BMAP_ANCHOR_BOTTOM_RIGHT"-->
        <!--            :showAddressBar="true"-->
        <!--            :autoLocation="true"-->
        <!--    ></bm-geolocation>-->
        <bm-marker :position="{ lng: center.lng, lat: center.lat }" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label :content="`<p>经度：${longitude}</p><p>纬度：${latitude}</p>`" :labelStyle="labelStyle" :offset="{width: -60, height: 30}" />
        </bm-marker>
      </baidu-map>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCancle">取 消</el-button>
        <el-button type="primary" @click="getCoordinate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'MapDialog',
    props: {
      dialogVisible: { type: Boolean }
    },
    data() {
      return {
        baidumapSwitch: false,
        center: {lng: 0, lat: 0},
        zoom: 16,
        // location: "深圳市",
        // keyword: "请输入搜索关键词",
        labelStyle: {
          padding: '15px',
          border: '1px solid #ccc',
          borderRadius: '5px',
          fontSize: '12px'
        }
      }
    },
    computed: {
      //经纬度保留小数点后6位
      longitude() {
        return this.center.lng == 0? this.center.lng : parseFloat(this.center.lng).toFixed(6)
      },
      latitude() {
        return this.center.lat == 0? this.center.lat : parseFloat(this.center.lat).toFixed(6)
      }
    },
    methods: {
      //百度地图初始化（这个一定要！否则地图回加载不出来）
      handler({BMap, map}) {
        let geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(r => {
        //获取当前经纬度存在偏差值
          //117.02496707, 36.68278473
          //117.14278, 36.676152
          this.center.lng = r.point.lng
          this.center.lat = r.point.lat
        })
      },
      //点击获取到当前经纬度
      getClickInfo(e) {
        // console.log(e.point.lng);
        // console.log(e.point.lat);
        this.center.lng = e.point.lng;
        this.center.lat = e.point.lat;
      },
      //双向绑定经纬度以及缩放尺寸
      syncCenterAndZoom(e) {
        const {lng, lat} = e.target.getCenter();
        this.center.lng = lng;
        this.center.lat = lat;
        // this.zoom = e.target.getZoom();
      },
      //经纬度同步
      // baidumap() {
      //   this.baiduDevicelocationx = this.center.lng
      //   this.baiduDevicelocationy = this.center.lat
      // }
      //传递经纬度坐标
      getCoordinate() {
        this.$emit('getCoordinate', `${this.center.lng}`, `${this.center.lat}`)
      },
      //关闭弹窗
      dialogCancle() {
        this.$emit('dialogCancle', false);
      },
    }
  }
</script>

<style scoped>
  .map {
    width: 100%;
    height: 450px;
  }
</style>

• 局部注册、使用

按需引入组件，这将减少工程打包后的容量尺寸

<template>
  <baidu-map class="bm-view" ak="YOUR_APP_KEY">
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

• CDN 全局注册

<script>
Vue.use(VueBaiduMap.default, {
  ak: 'YOUR_APP_KEY'
})
</script>