【uniapp】微信小程序获取经纬度

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情

业务背景

在用户进入小程序首页后，需要在首页左上角来展示当前用户所在的城市，用于提醒用户当前所在归属地。因为有些地区当前业务不开放。这样就需要进入小程序后获取用户的位置信息，并通过服务端来根据经纬度来返回当前用户的城市信息。

思路

通过uniapp自带的API：uni.getLocation来获取当前小程序用户的经度与纬度，然后通过三方地图API来根据经纬度获取具体的位置信息。

代码实现

一、检查当前用户的小程序是否已经授权访问scope属性

isGetLocation(a="scope.userLocation"){ 
    var _this=this;
    uni.getSetting({
            success(res) {                    
                    if (!res.authSetting[a]) {  //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
                            _this.getAuthorizeInfo()
                    }else{
                            _this.getLocationInfo()
                    }
            }
    });
},

二、获取小程序用户位置授权

getAuthorizeInfo(a="scope.userLocation"){  //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
        var _this=this;
        uni.authorize({
                scope: a,
                success() { //1.1 允许授权
                        _this.getLocationInfo();
                },
                fail(){    //1.2 拒绝授权
                        console.log("你拒绝了授权，无法获得周边信息")
                }
        })
},

三、调用uniapp获取位置api

getLocationInfo() {
        var _this=this;
        uni.getLocation({
           type: 'gcj02',  // 默认值为wgs84；可选值（ 1.wgs84 返回 gps 坐标，2.gcj02 返回可用于 wx.openLocation 的坐标）
                wgs84: false, // 传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度
                sHighAccuracy: false, // 开启高精度定位
                highAccuracyExpireTime: 3000, //高精度定位超时时间(ms)，指定时间内返回最高精度，该值3000ms以上高精度定位才有效果
                success: function (res) {
                  console.log('成功获取位置信息',res);
                        _this.getUserCity(res)
                },
                fail: function (error) {
                        console.log('获取当前位置失败',error)
                },
                complete: function(com){
                  // console.log('接口调用结束的回调函数（调用成功、失败都会执行）',com)     
           }
         });
    },

最后

在服务端我们可以进行注册第三方地图API来获取具体位置信息，比如百度地图、腾讯地图等。通过配置key传入经度纬度即可获取。不过有些第三方地图接口商用的话是要收费的，这里请小伙伴们注意。