背景

實現小程式進去後會獲取使用者當前所在城市，然後顯示該城市的資料，並且顯示在導航欄和 Tab上。

微信小程式中，我們可以通過呼叫wx.getLocation()獲取到裝置當前的地理位置資訊，這個資訊是當前位置的經緯度。如果我們想獲取當前位置是處於哪個國家，哪個城市等資訊，該如何實現呢？

微信小程式中並沒有提供這樣的API，但是沒關係，有wx.getLocation()得到的經緯度作為基礎就夠了，其他的，我們可以使用其他第三方地圖服務可以來實現，比如騰訊地圖API。

所以整個步驟就是：

在小程式中獲取當前的地理位置，涉及小程式API為wx.getLocation
把第1步中獲得的經緯度資訊通過騰訊地圖的介面逆地址解析，涉及騰訊地圖介面為

在小程式中獲取當前的地理位置

在小程式中，呼叫wx.getLocation，使用前需要使用者授權scope.userLocation，程式碼如下

checkAuth(callback) {
  wx.getSetting({
    success(res) {
      if (!res.authSetting\['scope.userLocation'\]) {
        wx.authorize({
          scope: 'scope.userLocation',
          success() {
            wx.getLocation({
              type: 'wgs84', 
              success(res) {
                callback(res.latitude, res.longitude)
              }
            })
          }
        })
      }
    }
  })
}
 

其中type的取值可以為：

• wgs84意思返回 gps 座標

• gcj02返回可用於wx.openLocation的座標

執行後會提示如下資訊，還需要在 app.json 中配置permission欄位

查詢文件後得知，得知需要如下配置

"permission": {
    "scope.userLocation": {
      "desc": "你的位置資訊將用於小程式位置介面的效果展示"
    }
}

desc 用於在彈出的授權提示框中展示，如下

允許後即可獲取介面返回的資訊，此過程會在右上角膠囊按鈕上顯示箭頭圖示

{
    accuracy: 65
    errMsg: "getLocation:ok"
    horizontalAccuracy: 65
    latitude: 30.25961    // 緯度，範圍為 -90~90，負數表示南緯
    longitude: 120.13026    // 經度，範圍為 -180~180，負數表示西經
    speed: \-1
    verticalAccuracy: 65
}

latitude和longitude即是我們需要的兩個欄位

騰訊地圖介面逆地址解析

以騰訊地圖為例，我們可以去騰訊地圖開放平臺註冊一個賬號，然後在它的管理後臺建立一個金鑰(key)，以及進行KEY設定，按照微信小程式JavaScript SDK入門及使用限制文件

在KEY設定的啟用產品中，勾選 WebServiceAPI，選擇簽名校驗方式，因為我是使用雲開發的方式，所以沒有什麼域名也沒有授權IP。

這部分程式碼邏輯如下

import QQMapWX from '../../scripts/qqmap-wx-jssdk.min.js'
let qqmapsdk
Page({
    onLoad: function (options) {
      // 例項化API核心類
      qqmapsdk = new QQMapWX({
         key: '開發金鑰（key）'    // 必填
      });
      this.checkAuth((latitude, longitude) => {
         // https://lbs.qq.com/qqmap\_wx\_jssdk/method-reverseGeocoder.html
         qqmapsdk.reverseGeocoder({
           sig: 'KEY設定中生成的SK字串',    // 必填
            location: {latitude, longitude},
            success(res) {
                wx.setStorageSync('loca\_city', res.result.ad\_info.city)
            },
            fail(err) {
               console.log(err)
               wx.showToast('獲取城市失敗')
            },
            complete() {
               // 做點什麼
            }
         })
      })
    }
}）

reverseGeocoder介面返回的結果，這裡面的欄位比較多，詳細可以看介面文件，裡面好幾個欄位可以取到城市，其中ad_info是行政區劃資訊，我就取這裡面的city了。

以上內容轉載自麵糊的文章《【實戰】小程式中結合騰訊地圖獲取使用者所在城市資訊》

連結：https://segmentfault.com/a/1190000021318458#comment-area

來源：segmentfault

著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。