极速快3精准计划|极速快3有规律吗
用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

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

Rolan 2019-4-12 00:10

解決問題:在小程序中獲取用戶的信息, 使用wx.getLocationAPI, 在使用這個 API 之前需要首先設置用戶授權.用戶有可能在進入小程序的時候關閉了獲取位置的權限, 當需要獲取位置的時候要重新判斷是否擁有權限。 如果 ...

解決問題:

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

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 閑不住的李先森 來自: 掘金
极速快3精准计划 北京pk10全天7吗计划 时时走势图怎么看 二十一点单机游戏 博彩源码 黑龙江时时几分开奖号码 时时彩一位必中口诀 巅峰三肖六码3肖6码 牛牛什么牌适合抢庄 天天时时彩人工计划 极速时时4个号公式