最近，甲方需求在后台管理系统中，实现地理位置定位。因此，研究了百度地图，特此记录一下：

一，申请开发账号，创建应用

登录地址：登录百度帐号

      应用类型，选择浏览器端即可。

 二，vue项目安装JSSDK

 npm install vue-baidu-map --save

三，注册组件（main.js中）

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
 // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key
 ak: '你的AK秘钥'
})

四，使用组件

<baidu-map
    class="box_map"
    :center="locations"
    :zoom="zoom"
    :scroll-wheel-zoom="true"
    @ready="handler"
    @click="clickLocation"
    v-if="isShowMap"
>
    <bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-city-list>
    <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
    ></bm-geolocation>
</baidu-map>

handler ({ BMap, map }) {
      // 保存百度地图类
      this.BMap = BMap
      this.map = map
      this.center = ''
      this.zoom = 15
      const geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition((res) => {
        // IP地址赋值给locations对象
        this.locations.lng = res.point.lng
        this.locations.lat = res.point.lat
      })
    },
    locationSuccess () {
      console.log(`定位成功`)
    },
    clickLocation (e) {
      console.log(e)
      this.locations.longitude = e.point.lng
      this.locations.latitude = e.point.lat
      const BMapGL = this.BMap
      const map = this.map
      map.clearOverlays()
      const marker = new BMapGL.Marker(
        new BMapGL.Point(e.point.lng, e.point.lat)
      )
      map.addOverlay(marker)
      const geoc = new BMapGL.Geocoder()
      geoc.getLocation(e.point, (rs) => {
        const addressComp = rs.addressComponents
        console.log(addressComp)
        this.form.setFieldsValue({
          detailAddress:
            addressComp.province +
            addressComp.city +
            addressComp.district +
            addressComp.street +
            addressComp.streetNumber
        })
      })
    }