使用微信小程序顯示用戶當(dāng)前地理位置的詳細(xì)代碼
前言
在微信小程序的開發(fā)中不可避免的會(huì)遇到需要顯示用戶地理位置的操作,本文將簡單介紹如何在微信小程序中顯示用戶當(dāng)前的地理位置。
wx.getLocation
通過wx.getLocation
我們得到用戶的經(jīng)緯度位置。
使用wx.getLocation
之前需要簡單的配置一下。因?yàn)楂@取用戶地理位置的操作需要用戶同意,所以我們在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è)人情況登錄或者注冊,然后再點(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í)還挺簡單的,總共兩步,第一步:拿到經(jīng)緯度,第二步:根據(jù)經(jīng)緯度獲取地名。 通過小程序的apiwx.getLocation
獲取經(jīng)緯度,然后通過騰訊的位置服務(wù)獲得地名。
到此這篇關(guān)于使用微信小程序顯示用戶當(dāng)前地理位置的詳細(xì)代碼的文章就介紹到這了,更多相關(guān)小程序顯示地理位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript獲得url所有參數(shù)鍵值表的方法
這篇文章主要介紹了JavaScript獲得url所有參數(shù)鍵值表的方法,實(shí)例分析了javascript操作URL的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03JavaScript中5個(gè)重要的Observer函數(shù)小結(jié)
瀏覽器為開發(fā)者提供了功能豐富的Observer,本文主要介紹了JavaScript中5個(gè)重要的Observer函數(shù)小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01javascript鼠標(biāo)跟隨運(yùn)動(dòng)3種效果(眼球效果,蘋果菜單,方向跟隨)
在很多網(wǎng)站上能看到圖片跟隨鼠標(biāo)移動(dòng)的JS特效,其實(shí)做法很簡單,本文就介紹了很多javascript鼠標(biāo)跟隨運(yùn)動(dòng),在這里與大家分享下。2016-10-10在layui中使用form表單監(jiān)聽ajax異步驗(yàn)證注冊的實(shí)例
今天小編就為大家分享一篇在layui中使用form表單監(jiān)聽ajax異步驗(yàn)證注冊的實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09javascript實(shí)現(xiàn)確定和取消提示框效果
這篇文章主要介紹了javascript實(shí)現(xiàn)確定和取消提示框效果的方法以及示例代碼分享,有需要的小伙伴可以參考下。2015-07-07詳解Typescript 內(nèi)置的模塊導(dǎo)入兼容方式
這篇文章主要介紹了詳解Typescript 內(nèi)置的模塊導(dǎo)入兼容方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05在table中插入多行,能使用與insertAdjacentHTML相似的功能嗎?
在table中插入多行,能使用與insertAdjacentHTML相似的功能嗎?...2006-12-12js以對象為索引的關(guān)聯(lián)數(shù)組
在代碼邏輯中更多的是用關(guān)聯(lián)數(shù)組的方式。但即使是這樣我們也很少使用對象類型作為鍵值對的鍵名。2010-07-07