小程序獲取用戶位置並轉化成真實描述文字

**解決問題： **

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 返回信息