window对象下的navigator对象有一个geolocation属性对象，此对象原型链上有一个getCurrentPosition()方法，此方法可唤起地理位置授权弹窗（获取地理位置是需要用户授权的）。

2021.08.17_15.05.08.jpg

1、需要先判断用户浏览器是否支持该功能，目前大多数浏览器支持：

          if(navigator.geolocation){
                // 授权及获取位置
                navigator.geolocation.getCurrentPosition()
            }else{
                console.log('浏览器不支持')
            }

2、getCurrentPosition()方法有2个回调参数，第一个是用户同意授权且成功获取到位置的回调，第二个是授权失败或未成功获取到位置的回调：

2021.08.17_15.24.59.jpg

               navigator.geolocation.getCurrentPosition((location)=>{
                    console.log(location)//第一张
                    // 获取成功的逻辑
                },(err)=>{
                    console.log(err)//第二张
                    // 获取失败的逻辑
                })

f71d700d2ada321bad3991d47dc1261b.jpg

location参数字段说明：

    location.coords.longitude// 经度
    location.coords.latitude// 纬度 
    location.coords.accuracy// 准确度
    location.coords.altitude// 海拔
    location.coords.altitudeAcuracy// 海拔准确度
    location.coords.heading// 行进方向
    location.coords.speed// 地面速度

bf54676fd4e0de1e2af1558601777b2e.jpg

err参数字段说明：

    err.code// 错误状态码
          1  :  用户拒绝浏览器获取位置信息
          2  :  尝试获取用户信息，但失败了
          3  :  设置了timeout值，获取位置超时了
          其他：其他错误

注：也能看到err对象原型链上有PERMISSION_DENIED、POSITION_UNAVAILABLE、TIMEOUT三个属性，它们的值分别对应上述3种情况。

3、拿到自己想要的地理位置后，可以通过获取到的经纬度查看具体的定位信息，参考https://www.cnblogs.com/cangqinglang/p/10833677.html

4、另外，getCurrentPosition()方法还有第3个参数json，是一些可选属性,有兴趣的可以去看看。