uniapp小程序項(xiàng)目獲取位置經(jīng)緯度信息
更新時間：2022年11月03日 17:18:49 作者：芳草斜陽_晨光
在實(shí)際項(xiàng)目中很多時候我們需要獲取設(shè)備的位置信息，去展示給客戶，或者以位置信息為參數(shù)，繼續(xù)向服務(wù)器獲取一些數(shù)據(jù)，這篇文章主要介紹了uni-app如何獲取位置信息(經(jīng)緯度),需要的朋友可以參考下
前言
提示：這里可以添加本文要記錄的大概內(nèi)容：
在實(shí)際項(xiàng)目中很多時候我們需要獲取設(shè)備的位置信息，去展示給客戶，或者以位置信息為參數(shù)，繼續(xù)向服務(wù)器獲取一些數(shù)據(jù)。接下來以uni-app小程序項(xiàng)目為例來介紹獲取位置信息的思路
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、相關(guān)代碼
- 判斷手機(jī)定位是否授權(quán)
// 定位授權(quán)
getLocation() {
let that = this;
// 1、判斷手機(jī)定位服務(wù)【GPS】 是否授權(quán)
uni.getSystemInfo({
success(res) {
console.log("判斷手機(jī)定位服務(wù)是否授權(quán):", res);
let locationEnabled = res.locationEnabled; //判斷手機(jī)定位服務(wù)是否開啟
let locationAuthorized = res.locationAuthorized; //判斷定位服務(wù)是否允許微信授權(quán)
if (locationEnabled == false || locationAuthorized == false) {
//手機(jī)定位服務(wù)（GPS）未授權(quán)
uni.showToast({
title: "請打開手機(jī)GPS",
icon: "none",
});
} else {
//手機(jī)定位服務(wù)（GPS）已授權(quán)
// 2、判斷微信小程序是否授權(quán)位置信息
// 微信小程序已授權(quán)位置信息
uni.authorize({
//授權(quán)請求窗口
scope: "scope.userLocation", //授權(quán)的類型
success: (res) => {
that.fnGetlocation();
},
fail: (err) => {
err = err["errMsg"];
uni
.showModal({
content: "需要授權(quán)位置信息",
confirmText: "確認(rèn)授權(quán)",
})
.then((res) => {
console.log(res);
if (res[1]["confirm"]) {
uni.openSetting({
success: (res) => {
if (res.authSetting["scope.userLocation"]) {
// 授權(quán)成功
uni.showToast({
title: "授權(quán)成功",
icon: "none",
});
that.fnGetlocation();
} else {
// 未授權(quán)
uni.showToast({
title: "授權(quán)失敗,請重新授權(quán)",
icon: "none",
});
uni.showModal({
title: "授權(quán)",
content:
"獲取授權(quán)" +
authouName +
"失敗,是否前往授權(quán)設(shè)置？",
success: function (result) {
if (result.confirm) {
uni.openSetting();
}
},
fail: function () {
uni.showToast({
title: "系統(tǒng)錯誤！",
icon: "none",
});
},
});
}
},
});
}
if (res[1]["cancel"]) {
// 取消授權(quán)
uni.showToast({
title: "你拒絕了授權(quán)，無法獲得周邊信息",
icon: "none",
});
}
});
},
complete(res) {
// console.log('授權(quán)彈框', res);
if (res.errMsg == "authorize:ok") {
that.fnGetlocation();
} else {
uni.showModal({
title: "授權(quán)",
content:
"獲取授權(quán)" + authouName + "失敗,是否前往授權(quán)設(shè)置？",
success: function (result) {
if (result.confirm) {
uni.openSetting();
}
},
fail: function () {
uni.showToast({
title: "系統(tǒng)錯誤！",
icon: "none",
});
},
});
}
},
});
}
},
});
},
- 判斷小程序是否授權(quán)位置信息 （代碼在上方）
- 定位獲取
// 定位獲取
fnGetlocation() {
let that = this;
uni.getLocation({
type: "wgs84", //默認(rèn)為 wgs84 返回 gps 坐標(biāo)
geocode: "true",
isHighAccuracy: "true",
accuracy: "best", // 精度值為20m
success: function (res) {
console.log("定位獲取:", res);
let platform = uni.getSystemInfoSync().platform;
if (platform == "ios") {
//toFixed() 方法可把 Number 四舍五入為指定小數(shù)位數(shù)的數(shù)字。
that.bindList.long = res.longitude.toFixed(6);
that.bindList.lat = res.latitude.toFixed(6);
} else {
that.bindList.long = res.longitude;
that.bindList.lat = res.latitude;
}
that.bindList.longlat =
"經(jīng)度" +
that.changeTwoDecimal_f(that.bindList.long) +
"/" +
"緯度" +
that.changeTwoDecimal_f(that.bindList.lat);
that.getAreaCode(res.latitude, res.longitude);
},
fail(err) {
if (
err.errMsg ===
"getLocation:fail 頻繁調(diào)用會增加電量損耗，可考慮使用 wx.onLocationChange 監(jiān)聽地理位置變化"
) {
uni.showToast({
title: "請勿頻繁定位",
icon: "none",
});
}
if (err.errMsg === "getLocation:fail auth deny") {
// 未授權(quán)
uni.showToast({
title: "無法定位，請重新獲取位置信息",
icon: "none",
});
authDenyCb && authDenyCb();
that.isLocated = false;
}
if (
err.errMsg ===
"getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF"
) {
uni.showModal({
content: "請開啟手機(jī)定位服務(wù)",
showCancel: false,
});
}
},
});
},
- 通過經(jīng)緯度坐標(biāo)獲取區(qū)域碼
// getAreaCode通過經(jīng)緯度(wgs84)坐標(biāo)獲取區(qū)域碼
getAreaCode(latitude, longitude) {
this.$refs.uForm.resetFields();
var that = this;
that.$u.api
.getAreaCode({
latitude: latitude,
longitude: longitude,
})
.then((res) => {
if (res.code == 100000000) {
console.log("通過經(jīng)緯度坐標(biāo)獲取區(qū)域碼:", res);
// console.log(res, 'areaCode');
that.bindList.areaCode = res.data.areaCode;
that.bindList.specificAddress = res.data.detailLocation;
that.bindList.address = res.data.areaLocation;
} else {
uni.showToast({ title: res.msg, icon: "none" });
}
})
.catch((err) => {
this.loadState = "加載失敗err";
console.log("getDevList_err:", err); //--------------------
});
},二、相關(guān)的數(shù)據(jù)返回
三、效果展示
最后
提示：這里對文章進(jìn)行總結(jié)：
以上就是獲取位置信息的大概步驟思路：
- 判斷手機(jī)定位服務(wù)是否授權(quán)（uni.getSystemInfo）
- 判斷小程序是否授權(quán)位置信息（uni.authorize）
- 定位獲?。╱ni.getLocation）
- 通過經(jīng)緯度坐標(biāo)獲取區(qū)域碼，這是通過以經(jīng)緯度為參數(shù)獲取后端的數(shù)據(jù)
到此這篇關(guān)于uni-app如何獲取位置信息(經(jīng)緯度)的文章就介紹到這了,更多相關(guān)uni-app獲取位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序按鈕點(diǎn)擊動畫效果的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序按鈕點(diǎn)擊動畫效果的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
基于Bootstrap的Java開發(fā)問題匯總（Spring MVC）
這篇文章主要為大家匯總了基于Bootstrap的Java開發(fā)問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了js文件包含的幾種方式，在某些情況下還是比較實(shí)用的，下面以示例代碼的方式來呈現(xiàn)2014-09-09
下面小編就為大家分享一篇webpack打包并將文件加載到指定的位置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了uniapp小程序開發(fā)組件封裝之自定義輪播圖,本文主要展示小程序端封裝輪播圖組件，使用的是uniapp進(jìn)行的開發(fā)，主要使用的是uniapp官網(wǎng)提供的swiper組件，需要的朋友可以參考下2023-02-02
兩個等號直接比較值，但是類型不能相互轉(zhuǎn)換的時候報錯2010-04-04
javascript制作sql轉(zhuǎn)換為stringBuffer的小工具
這篇文章主要介紹了javascript制作sql轉(zhuǎn)換為stringBuffer的小工具，使用方法很簡單，吧寫好的sql語句只要格式化好之后放進(jìn)去就可以了，推薦給大家，有需要的小伙伴可以參考下。2015-04-04
JS基于面向?qū)ο髮?shí)現(xiàn)的放煙花效果
這篇文章主要介紹了JS基于面向?qū)ο髮?shí)現(xiàn)的放煙花效果,涉及javascript面向?qū)ο蠹夹g(shù)的使用技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了three.js 制作動態(tài)二維碼的示例代碼，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
javascript 實(shí)現(xiàn)動態(tài)側(cè)邊欄實(shí)例詳解
這篇文章主要介紹了javascript 實(shí)現(xiàn)動態(tài)側(cè)邊欄實(shí)例詳解的相關(guān)資料,并附實(shí)例代碼，幫助大家學(xué)習(xí)理解，需要的朋友可以參考下2016-11-11