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