|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一項門檻非常高的創(chuàng)新,經(jīng)過將近兩年的發(fā)展,已經(jīng)構(gòu)造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。 這篇文章給大家認真介紹了微信小程序城市定位的實現(xiàn)實例,主要實現(xiàn)了獲取當前所在國家城市信息的相關(guān)資料,文中介紹的非常詳細,相信對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。前言 在微信小程序中,我們可以通過調(diào)用 實現(xiàn)方法 微信小程序中并沒有提供這樣的API,但是沒關(guān)系,有 以騰訊地圖為例,我們可以去騰訊地圖開放平臺注冊一個賬號,然后在它的管理后臺創(chuàng)建一個密鑰(key)。 然后在頂部菜單里面,可以找到WebServiceAPI菜單:
騰訊地圖提供了很多WebServiceAPI,比如按照地址獲取經(jīng)緯度,根據(jù)經(jīng)緯度找地址,我們將要用到的就是根據(jù)經(jīng)緯度找地址,也稱作“逆地址解析”:
逆地址解析提供由坐標到坐標所在位置的文字描述的轉(zhuǎn)換,調(diào)用形式就是一個HTTP URL形式的API,基本用法如下: http://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77 這個URL的基本參數(shù)就是一個經(jīng)緯度坐標地址。你可以將這個URL中的key換成你自己的key,直接在瀏覽器中查看,就能看到類似這樣的結(jié)果,還可以根據(jù)傳入不同的參數(shù)選項,得到更豐富的信息: {
"status": 0,
"message": "query ok",
"request_id": "6225548022856589453",
"result": {
"location": {
"lat": 39.984154,
"lng": 116.30749
},
"address": "北京市海淀區(qū)北四環(huán)西路66號彩和坊路",
"formatted_addresses": {
"recommend": "海淀區(qū)中關(guān)村彩和坊路中國技術(shù)交易大廈",
"rough": "海淀區(qū)中關(guān)村彩和坊路中國技術(shù)交易大廈"
},
"address_component": {
"nation": "中國",
"province": "北京市",
"city": "北京市",
"district": "海淀區(qū)",
"street": "彩和坊路",
"street_number": "北四環(huán)西路66號"
},
"ad_info": {
"adcode": "110108",
"name": "中國,北京市,北京市,海淀區(qū)",
"location": {
"lat": 39.984154,
"lng": 116.307487
},
"nation": "中國",
"province": "北京市",
"city": "北京市",
"district": "海淀區(qū)"
},
"address_reference": {
"business_area": {
"title": "中關(guān)村",
"location": {
"lat": 39.984058,
"lng": 116.307518
},
"_distance": 0,
"_dir_desc": "內(nèi)"
},
"famous_area": {
"title": "中關(guān)村",
"location": {
"lat": 39.984058,
"lng": 116.307518
},
"_distance": 0,
"_dir_desc": "內(nèi)"
},
"crossroad": {
"title": "彩和坊路/北四環(huán)西路輔路(路口)",
"location": {
"lat": 39.985001,
"lng": 116.308113
},
"_distance": 104.2,
"_dir_desc": "西南"
},
"village": {
"title": "稻香園北社區(qū)",
"location": {
"lat": 39.983269,
"lng": 116.301979
},
"_distance": 480.1,
"_dir_desc": "東"
},
"town": {
"title": "海淀街道",
"location": {
"lat": 39.984154,
"lng": 116.307487
},
"_distance": 0,
"_dir_desc": "內(nèi)"
},
"street_number": {
"title": "北四環(huán)西路66號",
"location": {
"lat": 39.984119,
"lng": 116.307503
},
"_distance": 6.9,
"_dir_desc": ""
},
"street": {
"title": "彩和坊路",
"location": {
"lat": 39.984154,
"lng": 116.308098
},
"_distance": 49.1,
"_dir_desc": "西"
},
"landmark_l1": {
"title": "北京中關(guān)村創(chuàng)業(yè)大街",
"location": {
"lat": 39.984055,
"lng": 116.306992
},
"_distance": 43.9,
"_dir_desc": "東"
},
"landmark_l2": {
"title": "中國技術(shù)交易大廈",
"location": {
"lat": 39.984154,
"lng": 116.307487
},
"_distance": 0,
"_dir_desc": "內(nèi)"
}
}
}
}從這個API的返回結(jié)果中,我們可以看到它包含了我們想要的地址信息,如國家,城市,區(qū)等。 接下來,我們要在我們的代碼中調(diào)用這個API。該API可以通過JSONP的方式調(diào)用,也可以在服務(wù)器端發(fā)起調(diào)用。我是在我自己的服務(wù)端中調(diào)用的,下面是我的代碼,使用Node.js Express實現(xiàn)的,僅供參考: // 服務(wù)調(diào)用地址: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 () {
//獲取當前經(jīng)緯度信息
wx.getLocation({
success: ({latitude, longitude}) => {
//調(diào)用后臺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>運行結(jié)果如下所示:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)! 相關(guān)推薦: 如何通過微信小程序?qū)崿F(xiàn)獲取自己所處位置的經(jīng)緯度坐標的功能 以上就是微信小程序城市定位的實現(xiàn)的詳細內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 小程序是一種不需要下載安裝即可使用的應(yīng)用,它實現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應(yīng)用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!