【實(shí)戰(zhàn)】在微信小程序中獲取用戶所在城市信息

發(fā)表時(shí)間：2021-2-3

發(fā)布人：葵宇科技

瀏覽次數(shù)：84

背景

在《看啥好呢》中有個(gè)本地好看 Tab，進(jìn)去后會(huì)獲取用戶當(dāng)前所在城市，然后顯示該城市的數(shù)據(jù)，并且顯示在導(dǎo)航欄和 Tab 上。

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

微信小程序中并沒(méi)有提供這樣的 API，但是沒(méi)關(guān)系，有 wx.getLocation() 得到的經(jīng)緯度作為基礎(chǔ)就夠了，其他的，我們可以使用其他第三方地圖服務(wù)可以來(lái)實(shí)現(xiàn)，比如騰訊地圖或百度地圖的 API。

所以整個(gè)步驟就是：

在小程序中獲取當(dāng)前的地理位置，涉及小程序 API 為wx.getLocation
把第 1 步中獲得的經(jīng)緯度信息通過(guò)騰訊地圖的接口逆地址解析，涉及騰訊地圖接口為 reverseGeocoder(options:Object)

在小程序中獲取當(dāng)前的地理位置

在小程序中，調(diào)用 wx.getLocation，使用前需要用戶授權(quán) scope.userLocation，代碼如下

javascript

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 坐標(biāo)
gcj02 返回可用于 wx.openLocation 的坐標(biāo)。

運(yùn)行后會(huì)提示如下信息，還需要在 app.json 中配置 permission 字段

查詢文檔后得知，得知需要如下配置

javascript

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息將用于小程序位置接口的效果展示"
    }
}

desc 用于在彈出的授權(quán)提示框中展示，如下

允許后即可獲取接口返回的信息，此過(guò)程會(huì)在右上角膠囊按鈕上顯示箭頭圖標(biāo)

{
  accuracy: 65;
  errMsg: "getLocation:ok";
  horizontalAccuracy: 65;
  latitude: 30.25961; // 緯度，范圍為 -90~90，負(fù)數(shù)表示南緯
  longitude: 120.13026; // 經(jīng)度，范圍為 -180~180，負(fù)數(shù)表示西經(jīng)
  speed: -1;
  verticalAccuracy: 65;
}

latitude 和 longitude 即是我們需要的兩個(gè)字段

騰訊地圖接口逆地址解析

以騰訊地圖為例，我們可以去騰訊地圖開放平臺(tái)注冊(cè)一個(gè)賬號(hào)，然后在它的管理后臺(tái)創(chuàng)建一個(gè)密鑰(key)，以及進(jìn)行 KEY 設(shè)置，按照微信小程序 JavaScript SDK入門及使用限制文檔

在 KEY 設(shè)置的啟用產(chǎn)品中，勾選 WebServiceAPI，選擇簽名校驗(yàn)方式，因?yàn)槲沂鞘褂迷崎_發(fā)的方式，所以沒(méi)有什么域名也沒(méi)有授權(quán) IP。

這部分代碼邏輯如下

import QQMapWX from '../../scripts/qqmap-wx-jssdk.min.js'
let qqmapsdk
Page({
    onLoad: function (options) {

      // 實(shí)例化API核心類
      qqmapsdk = new QQMapWX({
         key: '開發(fā)密鑰（key）'    // 必填
      });
      this.checkAuth((latitude, longitude) => {
         // https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
         qqmapsdk.reverseGeocoder({
           sig: 'KEY設(shè)置中生成的SK字符串',    // 必填
            location: {latitude, longitude},
            success(res) {
                wx.setStorageSync('loca_city', res.result.ad_info.city)

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

            }
         })
      })
    }
}）