使用 wx.getLocation() 獲取使用者位置並轉化成真實描述文字

閒不住的李先森發表於2019-04-11

解決問題：

  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 返回資訊

相關文章