uniapp?h5如何獲取用戶地理位置信息(使用高德地圖)
更新時間：2023年08月04日 09:45:19 作者：·楓
這篇文章主要給大家介紹了關(guān)于uniapp?h5如何獲取用戶地理位置信息的相關(guān)資料,文中主要使用高德地圖,這里主要講h5實現(xiàn)獲取地理位置信息并定位功能,需要的朋友可以參考下
使用uni.getLocation()先獲取到當(dāng)前位置信息的經(jīng)緯度
H5端測試可以使用http，上線打包需要設(shè)置為https模式
谷歌瀏覽器可能會獲取不到任何信息，因為谷歌瀏覽器位置信息是連接谷歌服務(wù)器獲取的，國內(nèi)用戶可能獲取位置信息失敗
getCurrentlocation(){
let that = this
uni.getLocation({
type: 'wgs84',
isHighAccuracy: true,//開啟高精度定位
success(res) {
console.log('當(dāng)前位置的經(jīng)度：' + res.longitude);
console.log('當(dāng)前位置的緯度：' + res.latitude);
}
})
}使用高德開發(fā)平臺注冊一個key
高德開發(fā)平臺：高德開放平臺 | 高德地圖API (amap.com)
拿到key在manifest.json里進(jìn)行配置
配置完成后使用高德的逆地理編碼對上面請求拿到的經(jīng)緯度進(jìn)行解析
turnAdrr(longitude, latitude) {
let that = this
let _key = '高德里你注冊的key'; //高德API key類型：web服務(wù)
uni.request({
method: 'GET',
url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
data: {
key: _key,
location: `${longitude},${latitude}`,
output: 'JSON',
},
success: (res) => {
console.log(res.data.regeocode.formatted_address);
//用戶所在的地理位置信息
},
fail: r => {
console.log(r);
}
});
}App的話可以直接調(diào)用uni.getLocation()拿到用戶的所在位置，不需要進(jìn)行解析，可以直接拿到
uni.getLocation({
type: 'gcj02', //app直接獲取地理位置信息要使用gcj02
geocode:true , //必須要將geocode配置為true
isHighAccuracy: true,
success(res) {
console.log(res.address)
},
fail(err){
console.log(err)
}
})總結(jié)
到此這篇關(guān)于uniapp h5如何獲取用戶地理位置信息的文章就介紹到這了,更多相關(guān)uniapp h5獲取用戶地理位置信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
用過 Google 地圖的人可能都很熟悉，通過滾動滾輪可以對地圖進(jìn)行縮放，非常地方便。適當(dāng)?shù)厥褂脻L輪事件可以帶來不錯的用戶體驗。2010-03-03
javascript監(jiān)聽鼠標(biāo)滾輪事件淺析
這篇文章主要介紹了javascript監(jiān)聽鼠標(biāo)滾輪事件淺析,使用具體例子說明,同時考慮了不同的瀏覽器,需要的朋友可以參考下2014-06-06
在本篇內(nèi)容里小編給各位整理了一篇關(guān)于JS實現(xiàn)提示框跟隨鼠標(biāo)移動的相關(guān)實例代碼，需要的朋友們學(xué)習(xí)下。2019-08-08
這篇文章主要介紹了javascript原型模式用法,以實例形式較為詳細(xì)的分析了javascript原型模式的原理與使用技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了微信小程序 button 的樣式設(shè)置為圖片的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
TypeScript聲明文件是一種包含TypeScript類型信息的.d.ts文件,它允許開發(fā)者為已存在的JavaScript代碼提供類型注解,這些文件不包含可執(zhí)行代碼,下面就來詳細(xì)的介紹一下TypeScript聲明文件的實現(xiàn),感興趣的可以了解一下2025-12-12
這篇文章主要介紹了簡化版手機(jī)端照片預(yù)覽組件的相關(guān)資料,需要的朋友可以參考下2015-04-04
JS button按鈕實現(xiàn)submit按鈕提交效果
今天在使用表單是同時使用POST更新、刪除操作。然而form表單的 submit 且一旦提交則全部提交，所以想到的實現(xiàn)方法就是 使用button實現(xiàn),怎么實現(xiàn)呢？下面小編給大家分享JS button按鈕實現(xiàn)submit按鈕提交效果，感興趣的朋友參考下吧2016-11-11
js getBoundingClientRect使用方法詳解
這篇文章主要介紹了js getBoundingClientRect使用方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了JS實現(xiàn)密碼框的顯示密碼和隱藏密碼功能,涉及javascript針對頁面form表單元素動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12