使用 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 权限， 就再次执行获取位置的接口
                    if (res.authSetting["scope.userLocation"]) {
                         wx.getLocation({
                            success(res){
                                // 2.2 获取用户位置成功后，将会返回 latitude, longitude 两个字段，表明用户的经纬度位置
                                console.log(res)

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

复制代码

上面的代码的逻辑是: 当页面加载完成后， 1. 先获取用户受权列表。 并判断是否有 scope.userLocation 的权限.

1. 若是有权限， 直接调用 wx.getLocation 获取用户的位置。 将获取的经纬度位置传递给 getAddress。 在 getAddress 方法中将会把 经纬度位置转换成实际的 国家 省份 市 格式的地址；
2. 若是没有权限，就使用 wx.openSetting 接口代开权限设置界面， 让用户进行二次受权。受权成功后执行 wx.getLocation --> getAddress 的方法。

注意 注意 注意： 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', res)
                vm.setData({
                    // ad_info: res.result.ad_info
                    // city： res.result.ad_info
                })
            }
        })
    }
复制代码

关于 reverseGeocoder 返回的详细信息能够查看 reverseGeocoder 返回信息