概述

微信小程序提供一些API(地址)用于獲取當(dāng)前用戶的地理位置等信息，但無論是wx.getLocation，還是wx.chooseLocation均沒有單獨的字段表示國家與城市信息，僅有經(jīng)緯度信息。在實際使用過程中僅顯示地名是不夠的，我們可以將微信提供的經(jīng)緯度信息利用第三方地圖API轉(zhuǎn)換為國家與城市信息。百度地圖、高德地圖、騰訊地圖均有類似服務(wù)。本文以百度地圖為例。

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

百度地圖API

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

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

其中，APPID處填寫小程序的APP ID。

3.百度地圖逆地址解析API可以接受經(jīng)緯度坐標(biāo)坐標(biāo)，返回帶有國家和城市的地址信息。

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

此處注意：百度地圖API默認(rèn)采用坐標(biāo)為bd09ll(百度經(jīng)緯度坐標(biāo))，而微信內(nèi)置地圖獲得的經(jīng)緯度坐標(biāo)為wgs84ll（ GPS經(jīng)緯度）。

開發(fā)

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

1.利用微信選擇位置API，獲得經(jīng)緯度信息
2.百度地圖API，將微信獲得的經(jīng)緯度傳給百度，獲得城市等信息

'https://api.map.baidu.com/geocoder/v2/?ak=自己申請的百度密鑰&location=' + lb.latitude + ',' + lb.longitude + '&output=json&coordtype=wgs84ll' 

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

完整代碼：

       wx.chooseLocation({   // ①.利用微信選擇位置API，獲得經(jīng)緯度信息  
      success: function (lb) {
        console.log("地理位置")
        console.log(lb)
        that.data.addressData = lb
        wx.request({ // ②百度地圖API，將微信獲得的經(jīng)緯度傳給百度，獲得城市等信息
          url: 'https://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 //③.我們將微信得到的位置名稱“故宮博物館”與百度地圖API得到的“北京市東城區(qū)”合并顯示在頁面上。
            })
          },
          fail: function () {
            // fail
          },
          complete: function () {
            // complete
          }
        })
      },
      cancel: function (lb) {
      },
      fail: function (lb) {
        console.log(lb)
      }
    })

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

此功能較為簡單。

1.在地址處定義好需要的數(shù)據(jù)：

 <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會自動打開地圖。
微信小程序顯示位置的API： https://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
    })
  }, 

本文作者：獨木成林
原文地址：微信小程序城市定位(借助百度地圖API判斷城市)-實戰(zhàn)教程-小程序社區(qū)-微信小程序-微信小程序開發(fā)社區(qū)-小程序開發(fā)論壇-微信小程序聯(lián)盟