微信小程式獲取當前所在城市
阿新 • • 發佈:2019-01-03
本篇文章主要講解在微信小程式中,如何利用微信自帶的api(wx.getLocation())結合百度地圖的逆地址解析api來獲取當前所在城市名。
實現起來也比較簡單,步驟為:
1--利用微信小程式介面 wx.getLocation() 獲取當前經緯度。使用簡單,具體可以參照微信小程式api。
https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html#wxopenlocationobject
2--拿到經緯度之後,通過微信的wx.request()方法請求百度地圖的解析介面,傳入我們獲取到的經緯度,拿到當前定位的城市。
介面為:
ak需要在百度地圖api官網去註冊,然後建立一個應用,如此便可拿到您的ak。url: 'https://api.map.baidu.com/geocoder/v2/?ak=您的ak&location=' + latitude + ',' + longitude + '&output=json'
index.js程式碼如下:
Page({ data: { currentCity: '' }, onLoad: function (options) { this.getLocation(); }, getLocation: function () { var page = this wx.getLocation({ type: 'wgs84', //預設為 wgs84 返回 gps 座標,gcj02 返回可用於 wx.openLocation 的座標
success: function (res) { // success var longitude = res.longitude var latitude = res.latitude page.loadCity(longitude, latitude) } }) }, loadCity: function (longitude, latitude) { var page = this wx.request({ url: 'https://api.map.baidu.com/geocoder/v2/?ak=您的ak&location=' + latitude + ',' + longitude + '&output=json', data: {}, header: { 'Content-Type': 'application/json' }, success: function (res) { // success console.log(res); var city = res.data.result.addressComponent.city; page.setData({ currentCity: city }); }, fail: function () { page.setData({ currentCity: "獲取定位失敗" }); }, }) } })
loadCity()方法中,獲取到資訊之後打印出來,拿到的資訊是非常詳細的,如下圖:
我們這裡需要的是當前的city,即:res.data.result.addressComponent.city。如果專案中有需要更加豐富的資訊,也可使用此方法,比較簡便。
<!--index.wxml-->
<view class="container">
當前城市為:{{currentCity}}
</view>
效果如下:
文章參考來自:http://blog.csdn.net/tammy1151/article/details/56494776