頻道欄目
首頁 > 資訊 > 微信小程序 > 正文

微信小程序如何獲取當前所在城市?

18-01-11        來源:[db:作者]  
收藏   我要投稿

本篇文章主要講解在微信小程序中,如何利用微信自帶的api(wx.getLocation())結合百度地圖的逆地址解析api來獲取當前所在城市名。

實現起來也比較簡單,步驟為:

1--利用微信小程序接口 wx.getLocation() 獲取當前經緯度。使用簡單,具體可以參照微信小程序api。

2--拿到經緯度之后,通過微信的wx.request()方法請求百度地圖的解析接口,傳入我們獲取到的經緯度,拿到當前定位的城市。

接口為:

[javascript]view plaincopy
 
print?
  1. url:'https://api.map.baidu.com/geocoder/v2/?ak=您的ak&location='+latitude+','+longitude+'&output=json'

ak需要在百度地圖api官網去注冊,然后創建一個應用,如此便可拿到您的ak。

index.js代碼如下:

[javascript]view plaincopy
 
print?
  1. Page({
  2. data:{
  3. currentCity:''
  4. },
  5. onLoad:function(options){
  6. this.getLocation();
  7. },
  8. getLocation:function(){
  9. varpage=this
  10. wx.getLocation({
  11. type:'wgs84',//默認為wgs84返回gps坐標,gcj02返回可用于wx.openLocation的坐標
  12. success:function(res){
  13. //success
  14. varlongitude=res.longitude
  15. varlatitude=res.latitude
  16. page.loadCity(longitude,latitude)
  17. }
  18. })
  19. },
  20. loadCity:function(longitude,latitude){
  21. varpage=this
  22. wx.request({
  23. url:'https://api.map.baidu.com/geocoder/v2/?ak=您的ak&location='+latitude+','+longitude+'&output=json',
  24. data:{},
  25. header:{
  26. 'Content-Type':'application/json'
  27. },
  28. success:function(res){
  29. //success
  30. console.log(res);
  31. varcity=res.data.result.addressComponent.city;
  32. page.setData({currentCity:city});
  33. },
  34. fail:function(){
  35. page.setData({currentCity:"獲取定位失敗"});
  36. },
  37.  
  38. })
  39. }
  40. })

loadCity()方法中,獲取到信息之后打印出來,拿到的信息是非常詳細的,如下圖:

我們這里需要的是當前的city,即:res.data.result.addressComponent.city。如果項目中有需要更加豐富的信息,也可使用此方法,比較簡便。

index.wxml代碼如下:

[html]view plaincopy
print?
  1.  
  2. 當前城市為:{{currentCity}}
  3.  

效果如下:

相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片