實戰：在小程序中獲取用戶所在城市信息

最近在作本身的小程序《看啥好呢》，這個小程序是使用雲開發的方式開發的，功能特別簡單，就是獲取豆瓣、大麥網的數據展現，雖然功能簡單，但仍是記錄下開發過程和一些技術點，大約會有兩篇博文產出，這是第二篇。GitHub地址

背景

在《看啥好呢》中有個本地好看 Tab，進去後會獲取用戶當前所在城市，而後顯示該城市的數據，而且顯示在導航欄和 Tab上。

微信小程序中，咱們能夠經過調用wx.getLocation()獲取到設備當前的地理位置信息，這個信息是當前位置的經緯度。若是咱們想獲取當前位置是處於哪一個國家，哪一個城市等信息，該如何實現呢？

微信小程序中並無提供這樣的API，可是不要緊，有wx.getLocation()獲得的經緯度做爲基礎就夠了，其餘的，咱們可使用其餘第三方地圖服務能夠來實現，好比騰訊地圖或百度地圖的API。

因此整個步驟就是：

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

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

在小程序中，調用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了。

全文完。

---

關注公衆號，第一時間接收最新文章。若是對你有一點點幫助，能夠點喜歡點贊點收藏，還能夠小額打賞做者，以鼓勵做者寫出更多更好的文章。