uniapp?h5如何獲取用戶地理位置信息(使用高德地圖)
更新時(shí)間：2023年08月04日 09:45:19 作者：·楓
這篇文章主要給大家介紹了關(guān)于uniapp?h5如何獲取用戶地理位置信息的相關(guān)資料,文中主要使用高德地圖,這里主要講h5實(shí)現(xiàn)獲取地理位置信息并定位功能,需要的朋友可以參考下
使用uni.getLocation()先獲取到當(dāng)前位置信息的經(jīng)緯度
H5端測試可以使用http，上線打包需要設(shè)置為https模式
谷歌瀏覽器可能會獲取不到任何信息，因?yàn)楣雀铻g覽器位置信息是連接谷歌服務(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ā)平臺注冊一個(gè)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)文章
這篇文章主要介紹了微信小程序用戶拒絕授權(quán)的處理方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
下面小編就為大家?guī)硪黄獪\談DOM的操作以及性能優(yōu)化問題-重繪重排。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
動態(tài)生成方法的例子，這些方法在新對象實(shí)例化的時(shí)候創(chuàng)建2009-07-07
UniApp中Scroll-View設(shè)置占滿下方剩余高度的方法記錄
在使用uniapp開發(fā)項(xiàng)目過程中有時(shí)候會想讓一些組件占有屏幕剩余的高度,下面這篇文章主要給大家介紹了關(guān)于UniApp中Scroll-View設(shè)置占滿下方剩余高度的方法,需要的朋友可以參考下2023-04-04
Javascript實(shí)現(xiàn)快速排序（Quicksort）的算法詳解
排序算法（Sorting algorithm）是計(jì)算機(jī)科學(xué)最古老、最基本的課題之一，要想成為合格的程序員，就必須理解和掌握各種排序算法。2015-09-09
js獲取兩個(gè)數(shù)組對象的差集實(shí)現(xiàn)方法
這篇文章主要為大家介紹了js獲取兩個(gè)數(shù)組對象的差集實(shí)現(xiàn)方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
基于JavaScript的操作系統(tǒng)，你聽說過嗎？小編也是第一次聽說，接觸，和大家一起了解一下2016-01-01
這篇文章主要介紹了TypeScript 裝飾器定義，裝飾器是一種新的聲明，它可以作用于類聲明 、方法 、訪問器 、屬性以及參數(shù)上，下面我們就來看看TypeScript 裝飾器的具體定義吧,需要的朋友可以參考一下，希望對你有所幫助2021-12-12
webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler),下面這篇文章主要給大家介紹了關(guān)于webpack打包進(jìn)度展示以及美化的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
微信小程序通過點(diǎn)擊事件跨頁面?zhèn)鲄⒓癲ata-方法傳參（data-）的示例詳解
在?vue?中，我們可以直接在點(diǎn)擊事件中放入傳遞的參數(shù)進(jìn)行傳參；然而微信小程序中并不適用這樣的寫法，但是微信小程序可以通過自定義屬性從而綁定參數(shù)使用，這篇文章主要介紹了微信小程序通過點(diǎn)擊事件跨頁面?zhèn)鲄⒁约癲ata-方法傳參（data-）,需要的朋友可以參考下2023-12-12