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