前端获取当前地址

1、利用HTML5 地理定位 获取当前位置经纬度

navigator.geolocation.getCurrentPosition(success,error)

• getCurrentPosition() 方法的第一个参数用于处理成功返回的数据。它规定当获取用户位置成功时运行的函数；
• getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数
  
  2、利用百度地图中的api将经纬度转换成地址名称
• 引入百度地图
• 使用HTML5获取到当前位置经纬度
• 调用百度地图api 传入经纬度数据 获取到当前位置名称（省市区）

1、在根目录下写好了一个map的js文件
map.js文件：

export default {
  init: function() {
  //ak密钥,百度地图官网申请
    const AK = 'xxxxxxxxxxxxxx'
    const BMapURL = 'https://api.map.baidu.com/api?v=3.0&ak=' + AK + '&s=1&callback=onBMapCallback'
    return new Promise((resolve, reject) => {
      // 百度地图异步加载回调处理
      window.onBMapCallback = function() {
  resolve(BMap)
      }
      // 插入script脚本
      const scriptNode = document.createElement('script')
      scriptNode.setAttribute('type', 'text/javascript')
      scriptNode.setAttribute('src', BMapURL)
      document.body.appendChild(scriptNode)
    })
  }
}

2、引入BMap

//这里是在vue项目中引入的
import BMap from '@/map.js'

3、使用

    getAddress() {
      // 检测是否支持地理定位
      if (navigator.geolocation) {
        const that = this
        navigator.geolocation.getCurrentPosition(
          function(position) {
            console.log(position.coords.longitude, position.coords.latitude) // getCurrentPosition()获取到的经纬度
            BMap.init().then((BMap) => {
              const point = new BMap.Point(position.coords.longitude, position.coords.latitude)
              const gc = new BMap.Geocoder()
              gc.getLocation(point, function(rs) {
                const addComp = rs.addressComponents
                const address = rs.address  //得到当前地址
                console.log(address, '地址', addComp)
              })
            })
          },
          function(e) {
            throw (e.message)
          }
        )
      }
    }