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