【實戰】微信小程序獲取地理位置和地名的方法

背景：本人最近在開發一款天氣預報的微信小程序，在調用騰訊地圖API進行逆地址解析獲取詳細地名時，發現其官方文檔的描述模棱兩可、網絡上也沒有搜到確實可行的方法。在通過對官方文檔的逐句翻譯和數次嘗試以後，終於成功的獲取到了地理位置和地名。特作此記錄，以備不時之需。

1、微信小程序獲取地理位置和詳細地名的思路

一、使用微信小程序wx.getLocationAPI方法獲取用戶當前位置的經緯度，這個步驟比較簡單
二、使用拿到的經緯度請求地圖位置服務的逆地址解析接口，獲取省市縣和詳細地址。這是最關鍵的步驟，也是騰訊地圖API官網沒有寫清楚的一步

2、微信小程序獲取地理位置和詳細地名的思路

一、獲取用戶當前位置經緯度

小程序使用 wx.getLocation 方法獲取用戶的當前位置經緯度。wx.getLocation 默認獲取的是 wgs84 座標系，即 GPS 的座標系，而國內地圖（除百度地圖外）通常用的都是 GCJ02（國測局座標，又稱爲「火星座標系」）的座標系，因此須要傳入 type 來指定座標系統。

// 微信api，獲取經緯度
  getLocation() {
    wx.getLocation({
      type: 'gcj02',
      success: this.updateLocation,
      fail: (e)=> {
        this.openLocation()
      }
    })
  }
複製代碼

二、根據經緯度獲取當前位置

須要在騰訊地圖開放平臺註冊帳號，在控制檯 → key與配額 → key管理中建立密鑰，建立密鑰後才能使用地圖SDK及WebService API等產品與服務。

在小程序裏調用騰訊地圖API的方式有主要兩種：

• 騰訊地圖提供的微信小程序JavaScript SDK
• WebService API，即直接發送請求，調用API接口

這裏我選擇了WebService API，緣由以下：

1. 小程序 SDK 和 WebService API 都很方便，不須要加密數據，密鑰都是對外暴露的
2. WebService API 使用微信 wx.request 方法能夠直接發送請求，對代碼無侵入性
3. 小程序 SDK 本質上仍是用 wx.request 封裝的 WebService API

根據WebService API的相關說明頁面，須要傳入密鑰、location（latitude和longitude結合）、簽名計算sig信息。

2.一、獲取簽名計算sig信息

獲取簽名計算sig信息須要進行md5計算，此處我選用GitHub上star數量最多的JavaScript語言的md5倉庫，下載了其中的js文件，複製到微信小程序的utils目錄下：

在須要獲取地理位置和地名信息的page中，引入用於md5計算的庫：

// pages/index/index.js
import md5 from '../../utils/md5.js'

// 獲取應用實例
// ……
複製代碼

在本微信小程序中使用JavaScript-MD5庫時，直接調用md5(value)方法，其中value是String類型

2.二、完整的地理位置獲取流程

貼出完整的獲取地理位置和地名的代碼。若是須要獲取此地理位置的其餘相關信息，請查看騰訊地圖開放平臺的逆地址解析API文檔

//pages/index/index.js

// QQMapKey是在騰訊地圖開放平臺設置的密鑰
// 請使用你本身的密鑰
const QQMapKey = 'NILBZ-BOIHP-SOOD3-LTPVO-ITVWK-*****';

// 在密鑰設置中開啓WebServiceAPI，選擇簽名校驗，便可獲取Secret key，即SK
// 請使用你本身的SK
const SK = '25rlrIUFfYbJkN54yqB7IX4sR*****';

// 引入MD5庫
import md5 from '../../utils/md5.js';

//獲取應用實例
const app = getApp()

Page({
  data: {
    lat: 40.056974,
    lon: 116.307689,
    address: '定位中'
  },
  onLoad() {
    this.getLocation()
  },
  // 根據經緯度，逆地址解析
  getAddress(lat, lon) {
    // 在wx.request中，this指向wx.request，故沒法setData，此處將this指向that
    var that = this
    wx.showLoading({
      title: '定位中',
      mask: true,
      duration: 3000
    })
    let SIG = md5("/ws/geocoder/v1?key=" + QQMapKey +"&location="+String(lat)+","+String(lon)+SK)
    wx.request({
      url: 'https://apis.map.qq.com/ws/geocoder/v1',
      data: {
        key: QQMapKey,
        location: `${lat},${lon}`,
        sig: SIG
      },
      success(res) {
        let result = res.data.result
        // console.log(result)
        // formatted_addresses.recommend是通過騰訊地圖優化過的描述方式，更具人性化特色
        let formatted_addresses = result.formatted_addresses.recommend
        // 此處的that指向app
        that.setData({
          address: formatted_addresses
        })
        wx.hideLoading()
      },
      fail:(e) => {
        console.log(e)
        wx.hideLoading()
      }
    })
  },
  // 根據經緯度，設置數據
  updateLocation(res) {
    let {latitude: lat, longitude: lon} = res
    let data = {
      lat,
      lon
    }
    this.setData(data)
    this.getAddress(lat, lon)
  },
  // 微信api，獲取經緯度
  getLocation() {
    wx.getLocation({
      type: 'gcj02',
      success: this.updateLocation,
      fail: (e)=> {
        console.log(e)
      }
    })
  }

})
複製代碼