背景

在(zài)《看啥好呢》中有個(gè)本地(dì / de)好看 Tab，進去後會獲取用戶當前所在(zài)城市，然後顯示該城市的(de)數據，并且顯示在(zài)導航欄和(hé / huò) Tab 上(shàng)。

微信小程序中，我們可以(yǐ)通過調用 wx.getLocation() 獲取到(dào)設備當前的(de)地(dì / de)理位置信息，這(zhè)個(gè)信息是(shì)當前位置的(de)經緯度。如果我們想獲取當前位置是(shì)處于(yú)哪個(gè)國(guó)家，哪個(gè)城市等信息，該如何實現呢？

微信小程序中并沒有提供這(zhè)樣的(de) API，但是(shì)沒關系，有 wx.getLocation() 得到(dào)的(de)經緯度作爲(wéi / wèi)基礎就(jiù)夠了(le／liǎo)，其他(tā)的(de)，我們可以(yǐ)使用其他(tā)第三方地(dì / de)圖服務可以(yǐ)來(lái)實現，比如騰訊地(dì / de)圖或百度地(dì / de)圖的(de) API。

所以(yǐ)整個(gè)步驟就(jiù)是(shì)：

1. 在(zài)小程序中獲取當前的(de)地(dì / de)理位置，涉及小程序 API 爲(wéi / wèi)wx.getLocation
2. 把第 1 步中獲得的(de)經緯度信息通過騰訊地(dì / de)圖的(de)接口逆地(dì / de)址解析，涉及騰訊地(dì / de)圖接口爲(wéi / wèi) reverseGeocoder(options:Object)

在(zài)小程序中獲取當前的(de)地(dì / de)理位置

在(zài)小程序中，調用 wx.getLocation，使用前需要(yào / yāo)用戶授權 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 的(de)取值可以(yǐ)爲(wéi / wèi)：

• wgs84 意思返回 gps 坐标
• gcj02 返回可用于(yú) wx.openLocation 的(de)坐标。

運行後會提示如下信息，還需要(yào / yāo)在(zài) app.json 中配置 permission 字段

查詢文檔後得知，得知需要(yào / yāo)如下配置

"permission": {
    "scope.userLocation": {
      "desc": "你的(de)位置信息将用于(yú)小程序位置接口的(de)效果展示"
    }
}

desc 用于(yú)在(zài)彈出(chū)的(de)授權提示框中展示，如下

允許後即可獲取接口返回的(de)信息，此過程會在(zài)右上(shàng)角膠囊按鈕上(shàng)顯示箭頭圖标

{
  accuracy: 65;
  errMsg: "getLocation:ok";
  horizontalAccuracy: 65;
  latitude: 30.25961; // 緯度，範圍爲(wéi / wèi) -90~90，負數表示南緯
  longitude: 120.13026; // 經度，範圍爲(wéi / wèi) -180~180，負數表示西經
  speed: -1;
  verticalAccuracy: 65;
}

latitude 和(hé / huò) longitude 即是(shì)我們需要(yào / yāo)的(de)兩個(gè)字段

騰訊地(dì / de)圖接口逆地(dì / de)址解析

以(yǐ)騰訊地(dì / de)圖爲(wéi / wèi)例，我們可以(yǐ)去騰訊地(dì / de)圖開放平台注冊一個(gè)賬号，然後在(zài)它的(de)管理後台創建一個(gè)密鑰(key)，以(yǐ)及進行 KEY 設置，按照微信小程序 JavaScript SDK入門及使用限制文檔

在(zài) KEY 設置的(de)啓用産品中，勾選 WebServiceAPI，選擇簽名校驗方式，因爲(wéi / wèi)我是(shì)使用雲開發的(de)方式，所以(yǐ)沒有什麽域名也(yě)沒有授權 IP。

這(zhè)部分代碼邏輯如下

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設置中生成的(de)SK字符串',    // 必填
            location: {latitude, longitude},
            success(res) {
                wx.setStorageSync('loca_city', res.result.ad_info.city)

            },
            fail(err) {
               console.log(err)
               wx.showToast('獲取城市失敗')
            },
            complete() {
               // 做點什麽

            }
         })
      })
    }
}）

reverseGeocoder 接口返回的(de)結果，這(zhè)裏面的(de)字段比較多，詳細可以(yǐ)看接口文檔，裏面好幾個(gè)字段可以(yǐ)取到(dào)城市，其中 ad_info 是(shì)行政區劃信息，我就(jiù)取這(zhè)裏面的(de) city 了(le／liǎo)。