1. 程式人生 > >微信小程序:獲取地理定位和顯示相應的城市名稱。

微信小程序:獲取地理定位和顯示相應的城市名稱。

~~ 域名 get 參考 轉換成 round .com 選擇 不想

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

  • 解決方案

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

  • 過程
  1. 代 碼:

技術分享圖片

  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中進行數據綁定。

技術分享圖片

微信小程序:獲取地理定位和顯示相應的城市名稱。