前端获取当前位置经纬度以及转换地址名称

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)
          }
        )
      }
    }
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页