小程序學習之如何獲取地理定位並顯示城市名稱

2019-11-03     科技i關注

本篇文章給大家帶來的內容是小程序學習之如何獲取地理定位並顯示城市名稱,讓大家了解在微信小程序中如何在定位時顯示相應的城市名稱。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有所幫助。

最近在看微信小程序,遇到地理定位顯示城市名稱的問題。本文就是記錄一下解決這一問題的過程。

解決方案

小程序的wx.getLocation()獲得是經緯度並不包含地名,所以要通過經緯度用相應的地圖轉換出地名(本文使用的是百度地圖)。

過程

1、代 碼:



1)、代碼詳解:

wx.getLocation(object):獲取當前的地理位置、速度。

注意:需要用戶授權地理定位權限。

詳細參數說明請查看小程序API:https://developers.weixin.qq.com/miniprogram/dev/api/location.html#wxgetlocationobject

讓我們看看wx.getLocation()成功後獲得到的數據:

從獲得到的數據我們可以看到並沒有我們想要的地名,因此就需要我們把經緯度轉換成相應的地名,本文使用的是百度地圖相應功能轉換出相應地名。

2)、 百度地圖的準備工作

、在使用百度地圖API之前,首先要獲得百度地圖的密鑰ak,ak由百度地圖方生成;

、打開百度地圖開放平台,導航欄處選擇 「開發文檔」 > 「微信小程序JavaScript API」,在「入門指南」處有詳細介紹怎麼生成密鑰ak,本文不再介紹。

參考文檔:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key

、複製生成好的ak,把ak粘貼到小程序中。其實,百度地圖有提供小程序使用的地圖api的壓縮包,但是出於小程序發布時對大小的限制,我選擇了使用連結。

百度地圖線上轉換連結地址:https://api.map.baidu.com/geocoder/v2/?ak=獲得的AK&location=' + latitude + ',' + longitude + '&output=json'

、使用小程序的帳號登錄微信公眾平台(https://mp.weixin.qq.com/),在「設置」 中選擇 「開發設置」,把百度地圖api的url添加到request合法域名中。

注意:百度地圖提供的有關於小程序API的下載包,不想使用連結地址的可以使用下載包,出於小程序發布時對大小的限制,本文使用的是連結地址未使用下載包。



、此時準備工作完成,便可以直接在小程序中根據經緯度轉換出相應的地名了,代碼如下圖。



讓我們看看success里的參數輸出:



獲取的參數中肯定有一款適合你~~~

2、附完整代碼:

wxml中進行數據綁定。

總結:以上就是本篇文的全部內容,希望能對大家的學習有所幫助。

以上就是小程序學習之如何獲取地理定位並顯示城市名稱的詳細內容,更多請關注其它相關文章!

更多技巧請《轉發 + 關注》哦!

文章來源: https://twgreatdaily.com/zh-cn/IEKYLW4BMH2_cNUgUfDp.html