這篇文章給大家認真介紹了微信小程式城市定位的實現實例,主要實現了獲取當前所在國家城市資訊的相關資料,文中介紹的非常詳細,相信對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。
前言
在微信小程式中,我們可以透過呼叫wx.getLocation()
來取得裝置當前的地理位置訊息,這個訊息是當前位置的經緯度。如果我們想獲取當前位置是處於哪個國家,哪個城市等信息,該如何實現?
實作方法
微信小程式中並沒有提供這樣的API,但是沒關係,有wx.getLocation()
得到的經緯度作為基礎就夠了,其他的,我們可以使用其他第三方地圖服務可以來實現,例如騰訊地圖或百度地圖的API。
以騰訊地圖為例,我們可以去騰訊地圖開放平台註冊一個帳號,然後在它的管理後台創建一個金鑰(key)。
然後在頂部選單裡面,可以找到WebServiceAPI選單:
騰訊地圖WebServiceAPI
騰訊地圖提供了很多WebServiceAPI,例如按照地址取得經緯度,根據經緯度找到地址,我們將要用到的就是根據經緯度找地址,也稱為「逆地址解析」:
逆地址解析
##逆位址解析提供由座標到座標所在位置的文字描述的轉換,呼叫形式就是一個HTTP URL形式的API,基本用法如下:
http://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77
接下來,我們要在我們的程式碼中呼叫這個API。該API可以透過JSONP的方式調用,也可以在伺服器端發起呼叫。我是在我自己的服務端中呼叫的,下面是我的程式碼,使用Node.js Express實現的,僅供參考:// 服务调用地址:http://localhost:3000/lbs/location
router.get('/lbs/location', function (req, res, next) {
let lat = req.query.latitude
let lng = req.query.longitude
request.get({
uri: 'https://apis.map.qq.com/ws/geocoder/v1/',
json: true,
qs: {
location: `${lat},${lng}`,
key: '你的腾讯地图密钥key'
}
}, (err, response, data) => {
if (response.statusCode === 200) {
responseUtil.jsonSuccess(res, data)
} else {
responseUtil.jsonError(res, 10001, '')
}
})
})
然後,可以看一下在小程式端的Page程式碼:
Page({ data: { address: {} }, onLoad: function () { //获取当前经纬度信息 wx.getLocation({ success: ({latitude, longitude}) => { //调用后台API,获取地址信息 wx.request({ url: 'http://localhost:3000/lbs/location', data: { latitude: latitude, longitude: longitude }, success: (res) => { let info = res.data.data.result.ad_info this.setData({ address: info }) }, fail: () => { }, complete: () => { } }) } }) } })
以及一個簡單的小程式介面,用於顯示這些位址資訊:<view>
<view>{{address.nation}}</view>
<view>{{address.city}}</view>
<view>{{address.district}}</view>
</view>
運行結果如下所示:
以上是微信小程式城市定位的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!