使用微信小程序顯示用戶當(dāng)前地理位置的詳細(xì)代碼
前言
在微信小程序的開發(fā)中不可避免的會(huì)遇到需要顯示用戶地理位置的操作，本文將簡(jiǎn)單介紹如何在微信小程序中顯示用戶當(dāng)前的地理位置。
wx.getLocation
通過wx.getLocation我們得到用戶的經(jīng)緯度位置。
使用wx.getLocation之前需要簡(jiǎn)單的配置一下。因?yàn)楂@取用戶地理位置的操作需要用戶同意，所以我們?cè)?code>app.json文件里面加上配置：
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用于小程序位置接口的效果展示"
}如下圖：
之后參考官方文檔使用：
// 獲取用戶地理位置
const res = await wx.getLocation({
type: "wgs84",
})
console.log('地理位置', res)
輸出值為：
其中latitude是緯度，longitude是經(jīng)度。
到這里我們的第一步已經(jīng)完成了。
騰訊位置服務(wù)
第二步就是如何將經(jīng)緯度轉(zhuǎn)化為地區(qū)位置了，我使用了騰訊的位置服務(wù)
根據(jù)個(gè)人情況登錄或者注冊(cè)，然后再點(diǎn)擊以下位置創(chuàng)建應(yīng)用
然后點(diǎn)擊文檔里的以下位置
選擇逆地址解析
然后根據(jù)文檔編寫代碼
var self = this
wx.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/',
method: 'GET',
data: {
location: `${res.latitude},${res.longitude}`,
key: '你自己的key'
},
success: (res) => {
console.log('地址', res);
}
})返回值如下：
之后就可以把拿到的值隨意使用啦
總結(jié)
顯示當(dāng)前用戶的地理位置其實(shí)還挺簡(jiǎn)單的，總共兩步，第一步：拿到經(jīng)緯度，第二步：根據(jù)經(jīng)緯度獲取地名。 通過小程序的apiwx.getLocation獲取經(jīng)緯度，然后通過騰訊的位置服務(wù)獲得地名。
到此這篇關(guān)于使用微信小程序顯示用戶當(dāng)前地理位置的詳細(xì)代碼的文章就介紹到這了,更多相關(guān)小程序顯示地理位置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信小程序上傳圖片到服務(wù)器的實(shí)例代碼，在文章給大家補(bǔ)充介紹了微信小程序上傳一或多張圖片 的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒加載,需要的朋友可以參考下2017-11-11
基于javascript實(shí)現(xiàn)窗口抖動(dòng)效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)窗口抖動(dòng)效果,需要的朋友可以參考下2016-01-01
通過Three.js的材質(zhì)和幾何體,我們可以很方便的創(chuàng)建基礎(chǔ)3D模型,下面這篇文章主要給大家介紹了關(guān)于three.js載入常用類型3D模型的幾種方法,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了JavaScript每天定時(shí)更換皮膚樣式的方法,涉及javascript針對(duì)時(shí)間及css樣式的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了如何實(shí)現(xiàn)js拖拽效果及原理解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)呼吸輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了js獲取今天、昨天、明天的日期函數(shù)代碼,需要的朋友可以參考下2023-05-05
如何基于layui的laytpl實(shí)現(xiàn)數(shù)據(jù)綁定的示例代碼
這篇文章主要介紹了如何基于layui的laytpl實(shí)現(xiàn)數(shù)據(jù)綁定的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript快速實(shí)現(xiàn)日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
做過微信開發(fā)的都知道，在部分android機(jī)型里微信不支持網(wǎng)頁上傳圖片的，這是由于這些機(jī)型的文件上傳存在內(nèi)存泄漏，會(huì)導(dǎo)致微信閃退，所以微信內(nèi)置瀏覽器將文件上傳屏蔽，本篇文章給大家介紹使用微信jssdk如何上傳圖片，需要的朋友可以關(guān)注下2015-08-08