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

    • 前言
    • 1.js原生geolocation
    • 2.第三方地图
    • 3.微信小程序sdk定位
      • uniapp使用：
      • 微信小程序使用：
      • 补充：
        • 1.小程序中的地图使用：
        • 2.小程序中用户拒绝授权后的处理：
    • 三种定位对比
    • 地图逆解析
    • 最后

前言

在很多的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中引入

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

 // 获取当前城市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.latitudesubmitForm.longitude = res.longitudeconsole.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的授权被拒绝了，下一次进入即使再调用，也不会出现授权弹框，而是会告诉你直接授权失败）

三种定位对比

相对来说，直接使用js原生的navigator还是比较不好的，精度稍差。建议如果是在小程序或者公众号h5中，那么就直接使用微信小程序的定位，定位精度高。如果不是在小程序或者公众号h5中，那么就直接使用第三方的地图。

地图逆解析

经过上面三种定位的方式，发现最终的结果都大差不差只有经度跟纬度，地理位置信息的中文实际上是很模糊的。所以我们需要使用第三方地图的地址逆解析，将获取到的经纬度转换为中文的地理坐标信息。值得一提的是，微信小程序默认使用腾讯地图。

最后

demo地址：
原生和第三方获取：https://github.com/rui-rui-an/getlocation
uniapp获取：https://github.com/rui-rui-an/uniappgetlocation