微信小程序(xu)提供一些API(地(di)(di)(di)址)用(yong)于獲取當前用(yong)戶的(de)(de)地(di)(di)(di)理位置等信息，但(dan)無論是(shi)wx.getLocation，還(huan)是(shi)wx.chooseLocation均沒(mei)有單獨的(de)(de)字段(duan)表示國家與城市(shi)信息，僅(jin)有經緯度(du)(du)(du)信息。在實際使(shi)用(yong)過程中(zhong)僅(jin)顯示地(di)(di)(di)名(ming)是(shi)不夠(gou)的(de)(de)，我們可以將微信提供的(de)(de)經緯度(du)(du)(du)信息利(li)用(yong)第三(san)方地(di)(di)(di)圖(tu)API轉換(huan)為國家與城市(shi)信息。百(bai)度(du)(du)(du)地(di)(di)(di)圖(tu)、高德地(di)(di)(di)圖(tu)、騰訊地(di)(di)(di)圖(tu)均有類似服(fu)務。本文以百(bai)度(du)(du)(du)地(di)(di)(di)圖(tu)為例。

微信小程序官方地理位置相關(guan)API：//mp.weixin.qq.com/debug/wxadoc/dev/api/location.html#wxchooselocationobject

百度地圖API

1.首先我(wo)們需要在百度地圖開(kai)放平臺(//lbsyun.baidu.com/index.php) 注冊為開(kai)發者。

2.申請開發者密鑰(AK)：

其中，APPID處填寫(xie)小(xiao)程序的APP ID。

3.百度地圖逆(ni)地址(zhi)解析(xi)API可以接受經緯度坐(zuo)標坐(zuo)標，返回帶有國家(jia)和(he)城市的地址(zhi)信(xin)息。

逆地址解析API：//lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding

此處(chu)注意：百度(du)地圖API默認(ren)采用坐標為bd09ll(百度(du)經緯(wei)度(du)坐標)，而微(wei)信內置地圖獲(huo)得的經緯(wei)度(du)坐標為wgs84ll（ GPS經緯(wei)度(du)）。

開發

功能一：獲取位置并顯示地理信息。

1.利用微信選擇位置API，獲得經緯度信息
2.百度地圖API，將微信獲得的經緯度傳給百度，獲得城市等信息
'//api.map.baidu.com/geocoder/v2/?ak=自己申請的百度密鑰&location=' + lb.latitude + ',' + lb.longitude + '&output=json&coordtype=wgs84ll'

3.我們將微信得到的位置名稱“故宮博物館”與百度地圖API得到的“北京市東城區”合并顯示在頁面上。
完整代碼：

        wx.chooseLocation({   // ①.利用微信(xin)選擇(ze)位置API，獲(huo)得經緯度信(xin)息  
      success: function (lb) {
        console.log("地(di)理位置")
        console.log(lb)
        that.data.addressData = lb
        wx.request({ // ②百度地圖API，將微信(xin)獲得的經(jing)緯度傳給百度，獲得城(cheng)市等(deng)信(xin)息(xi)
          url: '//api.map.baidu.com/geocoder/v2/?ak=GuMNe9FqXsvKoWY9VZaWNw9wlzUGjyTE&location=' + lb.latitude + ',' + lb.longitude + '&output=json&coordtype=wgs84ll',
          data: {},
          header: {
            'Content-Type': 'application/json'
          },
          success: function (res) {
            console.log(res.data.result);
            console.log(res.data.result.addressComponent.city + res.data.result.addressComponent.district);
            that.setData({
              addressAll: res.data.result.addressComponent.city + res.data.result.addressComponent.district + "·" + lb.name //③.我(wo)們(men)將微信得(de)到(dao)(dao)的位置名稱“故宮博(bo)物館”與(yu)百度地圖API得(de)到(dao)(dao)的“北(bei)京市東城區”合并顯示在頁(ye)面上。
            })
          },
          fail: function () {
            // fail
          },
          complete: function () {
            // complete
          }
        })
      },
      cancel: function (lb) {
      },
      fail: function (lb) {
        console.log(lb)
      }
    })

功能二：點擊位置查看地圖。

此功能較為簡單。
1.在(zai)地址(zhi)處定(ding)義好(hao)需要的數據：

    <block wx:if="{{resultData[k].address != 'undefined'}}">
      <text class="address" bindtap="bindLocation" data-address="{{resultData[k].address}}" data-name="{{resultData[k].name}}" data-longitude="{{resultData[k].longitude}}" data-latitude="{{resultData[k].latitude}}">{{resultData[k].addressAll}}</text>
    </block>

2.借助微信小程序的查看位置的API wx.openLocation。這個API會自動打開地圖。
微(wei)信小程序(xu)顯示位置的API：//mp.weixin.qq.com/debug/wxadoc/dev/api/location.html#wxopenlocationobject

  bindLocation: function (e) {// 點擊地址，查看位置
    wx.openLocation({
      latitude: e.target.dataset.latitude,
      longitude: e.target.dataset.longitude,
      name: e.target.dataset.name,
      address: e.target.dataset.address
    })
  },