前端获取用户地理位置定位

前言

在很多的h5/小程序中都需要用到定位，特别是一些连锁店，充电站，共享类的业务。本期就前端如何获取用户定位做一个说明。

1.js原生geolocation

先决条件：需要https，否则运行会获取不到位置信息。或者换成的edge浏览器。由于这个api获取的经纬度不够准确，且由于受到浏览器兼容性的问题，用的比较少。
js原生的方式其实就是利用了js的api：navigator。这边直接上代码，大家可以去运行一下，这个api只能拿到经度跟纬度

if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition((position) => {
            console.log(position);
            this.$set(this.location, 0, position.coords.longitude);
            this.$set(this.location, 1, position.coords.latitude);
          });
          console.log(this.location);
        } else {
          alert('您的设备不支持定位功能');
        }

2.第三方地图

第三方的方式主要就是利用第三方的sdk，常见的如百度地图，高德地图，腾讯地图，我这里就以百度地图为例
注册百度地图，并拿到ak，在vue的index.html中引入

 <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=kz26jZQiN4x1rkRAQhW0vTcnUet34OsD"></script>

在页面中执行以下代码即可拿到城市，经度，纬度

 // 获取当前城市
      const geolocation = new window.BMap.Geolocation();
      geolocation.getCurrentPosition((r) => {
        console.log(r);
        const city = r.address.city; // 返回当前城市
        this.currCity = city;
        this.$set(this.Baidulocation, 0, r.longitude);
        this.$set(this.Baidulocation, 1, r.latitude);
      });

3.微信小程序sdk定位

这里主要是用到微信小程序的getLocation这个sdk，这个sdk在开发者工具中可以直接使用，但是如果上线的话，是需要自己到小程序后台向微信提交申请，申请通过之后才能使用。
由于我这边使用的是uniapp进行开发的，下面贴的是uniapp的代码。

uniapp使用：

**1.**manifest.json中添加授权：

 /* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "wxd012ca2c1cfc762f",
        "requiredPrivateInfos": [
          "getLocation"
        ],
        "permission":{
          "scope.userLocation":{
            "desc":"授权位置信息"
          }
        },
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true
    },

2.使用：

const getLocation = () => {
  uni.getLocation({
    type: 'wgs84',
    success: function (res) {
      console.log(res)
      console.log('当前位置的经度：' + res.longitude)
      submitForm.latitude = res.latitude
      submitForm.longitude = res.longitude
      console.log('当前位置的纬度：' + res.latitude)
    },
  })
}

微信小程序使用：

也是分两步，1.app.json添加配置 2.直接使用这里就不作过多说明了
可以参考：https://blog.csdn.net/qq_43886365/article/details/130286822
微信小程序定位参考的官方地址：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

补充：

1.小程序中的地图使用：

获取到用户的经纬度之后，使用map组件（微信小程序和uniapp都是map组件）传入经纬度即可。

2.小程序中用户拒绝授权后的处理：

由于微信小程序秉承的是以用户体验至上的原则，所以，用户很有可能会拒绝给到你getLocation的授权，此时就无法获取到用户的位置信息，并且重新进入小程序时，微信在一段时间内会记录用户的授权状态，导致微信的授权页面拉不起来。此时需要去引导用户打开设置页允许位置信息的授权。这里我们可以参考滴滴出行的交互，是比较科学合理的。
首次进入时，在onLoad中唤起微信的位置授权getLocation

如果用户允许，则可以获取到，如果用户拒绝，则再次提示用户需要开启定位，这里的弹出框就是我们自己写的。

里面的开启定位，实际是调用了微信的设置页，即button组件的open-type为openSetting

如果用户点击了开启定位，以下为微信引导页（不用自己写），引导用户去开启位置。

如果用户依然点击了取消，说明用户实在是不想授权，则不进行获取位置信息。地图显示一个默认的经纬度信息即可。
重新进入小程序：如果用户上一次进入小程序时，两次都拒绝了授权，那么在重新进入小程序时，只能弹出我们自己写的弹框来引导用户授权位置信息（原因为getLocation的授权被拒绝了，下一次进入即使再调用，也不会出现授权弹框，而是会告诉你直接授权失败）