vue + ElementUI + BMap 百度地图实现地图选址定位并获取地址信息

API相关说明：

var geolocation = new BMap.Geolocation()：地图获取地理位置
var geoc = new BMap.Geocoder()：地址解析对象
var marker = new BMap.Marker(point)：创建标注

实例

vue组件中引入百度地图的使用
目标：实现页面定位选址
效果：

1、安装BMap

npm install vue-baidu-map --save

2、main.js中全局引用

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: 'your apikey'
})

3、页面组件中

HTML：

<el-dialog
  title="地图"
  :visible.sync="showMap"
  width="70%"
  :append-to-body="true"
  @closed="closeMap"
  style="height: 600px; overflow: hidden;"
  :close-on-click-modal="false" :close-on-press-escape="false"
>
  <el-input class="addressInput" v-model="addressKeyword" placeholder="请输入地址来查找相关位置"></el-input>
  <div class="control-btn">
    <el-button type="primary" @click="checkedAddress">确 定</el-button>
    <el-button @click="closeMap">关 闭</el-button>
  </div>
  <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080px" @click="getClickInfo" :scroll-wheel-zoom='true' v-loading='loadingMap'>
    <bm-view style="width: 100%; height:500px; flex: 1"></bm-view>
    <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
  </baidu-map>
</el-dialog>

JS:

data () {
  // 地图相关
  loadingMap: true,
  BMap: '',
  map: '',
  geoc: '',
  showMap: false,
  addressKeyword: '',
  pointLngLat: '',
  center: { lng: 109.45744048529967, lat: 36.49771311230842 },
  zoom: 13
},
// 地图初始化
handler ({BMap, map}) {
 this.mapOpen()
 this.BMap = BMap
 this.map = map
 this.loadingMap = true
 var geolocation = new BMap.Geolocation()
 this.geoc = new BMap.Geocoder() // 地址解析对象
 var $this = this
 // 调用百度地图api 中的获取当前位置接口
 geolocation.getCurrentPosition(function (r) {
   let myGeo = new BMap.Geocoder()
   myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function (result) {
     if (result) {
       $this.loadingMap = false
       console.log(result)
       $this.$set($this, 'pointLngLat', {lng: result.point.lng, lat: result.point.lat})
       map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放,默认关闭
       $this.addPoint({BMap, map})
     }
   })
 })
},
// 添加点位
addPoint ({BMap, map}) {
 map.clearOverlays()
 var point = new BMap.Point(this.pointLngLat.lng, this.pointLngLat.lat)
 let zoom = map.getZoom()
 console.log('zoom:' + zoom)
 setTimeout(() => {
   map.centerAndZoom(point, zoom)
 }, 0)
 var marker = new BMap.Marker(point) // 创建标注
 map.addOverlay(marker) // 将标注添加到地图中
},
// 点击地图
getClickInfo (e) {
 console.log(e)
 this.center = {lng: e.point.lng, lat: e.point.lat}
 this.pointLngLat = {lng: e.point.lng, lat: e.point.lat}
 // 获取点位信息
 let $this = this
 this.geoc.getLocation(e.point, function (rs) {
   var addComp = rs.addressComponents
   $this.pointAddress = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
   console.log($this.pointAddress)
 })
}

注意：
当点击地图打点时，会发生偏移，解决代码如下：

// 地图相关
mapOpen () {
  this.top = this.getScrollTop()
  if (this.top) {
    this.setScrollTop(0)
  }
},
// 关闭地图后调用
mapClose () {
  this.setScrollTop(this.top)
  this.top = 0
  this.showMap = false
},
getScrollTop () {
  let scrollTop = 0
  if (document.documentElement && document.documentElement.scrollTop) {
    scrollTop = document.documentElement.scrollTop
  } else if (document.body) {
    scrollTop = document.body.scrollTop
  }
  return scrollTop
},
setScrollTop (top) {
  if (!isNaN(top)) {
    if (document.documentElement && document.documentElement.scrollTop !== undefined) {
      document.documentElement.scrollTop = top
    } else if (document.body) {
      document.body.scrollTop = top
    }
  }
}