微信小程序:獲取地理定位和顯示相應的城市名稱。
最近在看微信小程序,遇到地理定位顯示城市名稱的問題。本文就是記錄這一過程。
- 解決方案
小程序的wx.getLocation()獲得是經緯度並不包含地名,所以要通過經緯度用相應的地圖轉換出地名(本文使用的是百度地圖)。
- 過程
- 代 碼:
1.1 代碼詳解:
wx.getLocation(object):獲取當前的地理位置、速度。註意:需要用戶授權地理定位權限。
詳細參數說明請查看小程序API:https://developers.weixin.qq.com/miniprogram/dev/api/location.html#wxgetlocationobject
讓我們看看wx.getLocation()成功後獲得到的數據:
從獲得到的數據我們可以看到並沒有我們想要的地名,因此就需要我們把經緯度轉換成相應的地名,本文使用的是百度地圖相應功能轉換出相應地名。
1.2 百度地圖的準備工作
1.在使用百度地圖API之前,首先要獲得百度地圖的密鑰ak,ak由百度地圖方生成;
2.打開百度地圖開放平臺,導航欄處選擇 “開發文檔” > “微信小程序JavaScript API”,在“入門指南”處有詳細介紹怎麽生成密鑰ak,本文不再介紹。
參考文檔:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key
3.復制生成好的ak,把ak粘貼到小程序中。其實,百度地圖有提供小程序使用的地圖api的壓縮包,但是出於小程序發布時對大小的限制,我選擇了使用鏈接。
百度地圖線上轉換鏈接地址:https://api.map.baidu.com/geocoder/v2/?ak=獲得的AK&location=‘ + latitude + ‘,‘ + longitude + ‘&output=json‘
4.使用小程序的賬號登錄微信公眾平臺(https://mp.weixin.qq.com/),在“設置” 中選擇 “開發設置”,把百度地圖api的url添加到request合法域名中。
註意:百度地圖提供的有關於小程序API的下載包,不想使用鏈接地址的可以使用下載包,出於小程序發布時對大小的限制,本文使用的是鏈接地址未使用下載包。
5.此時準備工作完成,便可以直接在小程序中根據經緯度轉換出相應的地名了,代碼如下圖。
讓我們看看success裏的參數輸出:
獲取的參數中肯定有一款適合你~~~
OK,本文僅供參考,轉載本文請註明出處,本文到這就結束了,謝謝。~~~
附完整代碼:
wxml中進行數據綁定。
微信小程序:獲取地理定位和顯示相應的城市名稱。