使用 wx.getLocation() 获取用户位置并转化成真实描述文字

解决问题：

1. 在小程序中获取用户的信息， 使用?wx.getLocation?API,在使用这个 API 之前需要首先设置用户授权.

2. 用户有可能在进入小程序的时候关闭了获取位置的权限， 当需要获取位置的时候要重新判断是否拥有权限。 如果没有权限需要再次提醒用户授权.

3. wx.getLocation?接口返回的用户位置是经纬度形式的， 需要借助于?微信小程序JavaScript SDK?对返回的?latitude?longitude?经纬度信息解析为?国家 省份 市 ...?的形式。

设置用户授权

小程序中部分接口是需要用户授权同意后才能调用的。 像?getUserInfo?getLocation?chooseAddress?chooseInvoiceTitle?getWeRunData?等。 当我们在小程序中需要使用这些接口的时候，首先都要用户用户授权才能使用， 我们可以使用?wx.openSetting?打开设置界面，引导用户开启授权。

getLocation?除了需要用户授权外， 还需要在开发的时候在?app.json?配置地理位置用途说明;

所以?第一步?我们需要在?app.json?文件中首先配置?地理位置用途说明

app.json

{
    "permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序位置接口的效果展示"
        }
    }
}
复制代码

获取经纬度信息

第二步?在需要使用到?getLocation?接口的页面中的?xx.js?的?onLoad?方法中判断用户时候已经授权了?getLocation?的权限。

使用?wx.getSetting?获取所有已授权接口。 该接口会返回一个?authSetting?对象， 里面包含了所有的授权结果。

success(res) {
   console.log(res.authSetting)
   // res.authSetting = {
   //   "scope.userInfo": true,
   //   "scope.userLocation": true
   // }
 }
})
复制代码

所以我们可以在?onLoad?方法中使用?getSetting?方法判断用户是否授权了?userLocation

onLoad: function() {
    // 将当前页面的 this 赋值给 vm,以区别于下面回调函数中的 this 
    const vm = this

    wx.getSetting({
      success(res) {
        // 1. scope.userLocation 为真， 代表用户已经授权
        if (res.authSetting['scope.userLocation']) {
         // 1.1 使用 getlocation 获取用户 经纬度位置
         wx.getLocation({
             success(res){
                 // 1.2 获取用户位置成功后，将会返回 latitude,longitude 两个字段，代表用户的经纬度位置
                 console.log(res)

                 // 1.3 将获取到的 经纬度传值给 getAddress 解析出 具体的地址
                vm.getAddress(res.latitude,res.longitude)
             }
         })
        }else {
            // 2. 用户未授权的情况下， 打开授权界面， 引导用户授权.
            wx.openSetting({
                success(res) {
                    // 2.1 如果二次授权允许了 userLocation 权限， 就再次执行获取位置的接口
                    "scope.userLocation"]) {
                         wx.getLocation({
                            success(res){
                                // 2.2 获取用户位置成功后，将会返回 latitude,longitude 两个字段，代表用户的经纬度位置
                                console.res)

                                // 2.3 将获取到的 经纬度传值给 getAddress 解析出 具体的地址
                                res.longitude)
                            }
                        })
                    }
                }
            })
        }
      }
    })
}

复制代码

注意 注意 注意：?wx.openSetting?接口在 2018年10月1号起用法已经改变， 像代码中直接使用?wx.openSetting?来打开授权页面已经不能使用了， 新版本的使用方法参考?打开小程序设置页（wx.openSetting）接口调整

转化经纬度信息为?国家 省份 市

在第二步， 已经拿到了经纬度的信息之后， 使用了一个?getAddress?的方法，来转化经纬度。在这个方法中需要使用?微信小程序JavaScript SDK?来作为工具。

在使用?微信小程序JavaScript SDK?的时候需要先在?微信小程序JavaScript SDK?中注册账号， 并申请一个?key?,?要想在小程序中使用这个?key?还需要 把这个?key?的?WebServiceAPI?勾选上

使用 '微信小程序 JavaScriptSDK' 需要?下载微信小程序 JavaScriptSDK v1.2 文件?。 然后将微信小程序 JavaScriptSDK?文件引入到当前页面的?xx.js?中。

// xx.js
const QQMapWX = require('../../utils/qqmap-wx-jssdk.js')
复制代码

最后实现?getAddress?方法:

getAddress(latitude,longitude) {
        // 生成 QQMapWX 实例
        let qqmapsdk = new QQMapWX({
            key: 'xxxx-xxxxx-xxxxx-xxxxx-xxxxx-xxxxx-xxxxx'
        })

        // reverseGeocoder 为 QQMapWX 解析 经纬度的方法
        qqmapsdk.reverseGeocoder({
            location: {latitude,longitude},success(res) {
                console.log('success',51); font-weight: 700;">res)
                vm.setData({
                    // ad_info: res.result.ad_info
                    // city： res.result.ad_info
                })
            }
        })
    }
复制代码

关于 reverseGeocoder 返回的详细信息可以查看?reverseGeocoder 返回信息

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!