網站首頁 編程語言 正文
最近遇到一個問題：uni-app在獲取定位時，在調試狀態下可以正常獲取當前位置信息，在云打包之后獲取定位時，出現getLocation:fail [geolocation:7]的錯誤。
經調試后，發現是在申請高德地圖KEY時，App的包名填寫錯誤導致的。
正常流程如下：
1、拿到APP包名：
2、申請高德地圖key
如何查看證書
keytool -list -v -keystore E:\my\test.keystore //后面是證書的路徑 寫自己的
申請key
?3、在項目清單中配置
4、代碼中調用
<template>
<view>
<!--導航欄-->
<cu-custom bgColor="bg-blue" :isBack="true"><block slot="content">現場打卡</block></cu-custom>
<!--定位信息-->
<view class="info-pt">
<view class="row-pt">
<view class="lt-pt">當前位置：<text class="val-pt">{{address}}</text></view>
<view class="rt-pt bg-green" @click="getLocation">刷新</view>
</view>
<view class="row-pt">
<view class="lt-pt">距離設備：<text class="val-pt">{{distance}}km</text></view>
<view class="rt-pt bg-blue" @click="submit">打卡</view>
</view>
</view>
<!--地圖-->
<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers" :scale="scale" @marktap="marktap" @callouttap="callouttap"></map>
<!--popup-->
<uni-popup :show="type === 'showpopup'" mode="fixed" @hidePopup="togglePopup('')">
<view class="popup-view">
<text class="popup-title">需要用戶授權位置權限</text>
<view class="uni-flex popup-buttons">
<button class="uni-flex-item" type="primary" open-type="openSetting" @tap="openSetting">設置</button>
<button class="uni-flex-item" @tap="togglePopup('')">取消</button>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
// #ifdef APP-PLUS
import permision from "@/utils/permission.js"
// #endif
export default {
components: {
uniPopup
},
data() {
return {
woInfo: null,
cmuid: '',
address: '正在獲取當前位置...',
distance: '',
longitude: 113.867476,
latitude: 22.786265,
scale: 13,
markers: [],
type: '',
dlocation: null,
dposNaN: false,
}
},
onLoad(option) {
//獲取cmuid
this.cmuid = uni.getStorageSync('cmuid');
//獲取傳遞的參數
this.woInfo = JSON.parse(decodeURIComponent(option.item));
//獲取設備位置
this.getDeviceLocation();
},
methods: {
/*地圖定位*/
marktap(e) {
},
callouttap(e) {
},
/*獲取定位*/
togglePopup(type) {
this.type = type;
},
showConfirm() {
this.type = 'showpopup';
},
hideConfirm() {
this.type = '';
},
async getLocation() {
// #ifdef APP-PLUS
let status = await this.checkPermission();
if (status !== 1) {
return;
}
// #endif
// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ
let status = await this.getSetting();
if (status === 2) {
this.showConfirm();
return;
}
// #endif
this.doGetLocation();
},
doGetLocation() {
this.api.showComLoading();
//獲取當前位置
uni.getLocation({
type: 'gcj02',
geocode: true,
success: (res) => {
//當前地址
this.address = res.address.province?res.address.province:'';
this.address += res.address.city?res.address.city:'';
this.address += res.address.district?res.address.district:'';
this.address += res.address.street?res.address.street:'';
this.address += res.address.streetNum?res.address.streetNum:'';
this.address += res.address.poiName?res.address.poiName:'';
//當前經緯度
this.longitude = res.longitude;
this.latitude = res.latitude;
if(this.dlocation){
//計算距離
var dist = this.getDistance(res.latitude, res.longitude, this.dlocation.lat, this.dlocation.lng);
this.distance = dist.toFixed(2);
}else{
//設備經緯度不存在
if(this.dposNaN){
this.api.showComToast('設備地址不存在');
}else{
this.getDeviceLocation();
}
}
//marks
let marks = [];
let cmark = {};
cmark.latitude = res.latitude;
cmark.longitude = res.longitude;
cmark.width = 24;
cmark.height = 32;
cmark.id = 1;
//當前位置
cmark.iconPath = '/static/images/zb.png';
marks.push(cmark);
let dmark = {};
dmark.latitude = this.dlocation.lat;
dmark.longitude = this.dlocation.lng;
dmark.width = 24;
dmark.height = 32;
dmark.id = 2;
//當前位置
dmark.iconPath = '/static/images/zb_r.png';
marks.push(dmark);
this.markers = marks;
},
fail: (err) => {
// #ifdef MP-BAIDU
if (err.errCode === 202 || err.errCode === 10003) { // 202模擬器 10003真機 user deny
this.showConfirm();
}
// #endif
// #ifndef MP-BAIDU
if (err.errMsg.indexOf("auth deny") >= 0) {
uni.showToast({
title: "訪問位置被拒絕"
})
} else {
uni.showToast({
title: err.errMsg
})
}
// #endif
},
complete: (e) => {
this.api.hideComLoading();
}
})
},
getSetting: function() {
return new Promise((resolve, reject) => {
uni.getSetting({
success: (res) => {
if (res.authSetting['scope.userLocation'] === undefined) {
resolve(0);
return;
}
if (res.authSetting['scope.userLocation']) {
resolve(1);
} else {
resolve(2);
}
}
});
});
},
openSetting: function() {
this.hideConfirm();
uni.openSetting({
success: (res) => {
if (res.authSetting && res.authSetting['scope.userLocation']) {
this.doGetLocation();
}
},
fail: (err) => {}
})
},
async checkPermission() {
let status = permision.isIOS ? await permision.requestIOS('location') :
await permision.requestAndroid('android.permission.ACCESS_FINE_LOCATION');
if (status === null || status === 1) {
status = 1;
} else if (status === 2) {
uni.showModal({
content: "系統定位已關閉",
confirmText: "確定",
showCancel: false,
success: function(res) {
}
})
} else if (status.code) {
uni.showModal({
content: status.message
})
} else {
uni.showModal({
content: "需要定位權限",
confirmText: "設置",
success: function(res) {
if (res.confirm) {
permision.gotoAppSetting();
}
}
})
}
return status;
},
/*百度地圖坐標轉換成高德坐標gcj02*/
bMapTransGdMap(lng, lat) {
let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
let x = lng - 0.0065;
let y = lat - 0.006;
let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
let lngs = z * Math.cos(theta);
let lats = z * Math.sin(theta);
return {
lng: lngs,
lat: lats
}
},
//獲取設備位置
getDeviceLocation(){
let para = {
'cmuid': this.cmuid,
'id': this.woInfo.id
}
this.api.deviceLocation(para).then(res=>{
if(res.data.msgCode && res.data.msgCode == "0"){
if(res.data.data.longitude){
let lnglat = res.data.data;
this.dlocation = this.bMapTransGdMap(lnglat.longitude, lnglat.latitude);
//獲取當前位置
this.getLocation();
}else{
this.dposNaN = true;
this.api.showComToast('設備地址不存在');
}
}else{
this.api.showComToast(res.message);
}
})
},
/*計算兩個經緯度的距離(千米)*/
getDistance(lat1, lng1, lat2, lng2){
var radLat1 = lat1*Math.PI / 180.0;
var radLat2 = lat2*Math.PI / 180.0;
var a = radLat1 - radLat2;
var b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
s = s *6378.137 ;// EARTH_RADIUS;
s = Math.round(s * 10000) / 10000;
return s;
},
/*打卡提交*/
submit(){
//判斷是否定位成功
if(!this.distance){
this.api.showComToast('正在獲取當前位置，請稍后...');
return;
}
//判斷是否在打卡范圍
if(this.distance > 5){
this.api.showComToast('超出打卡范圍，請在5km內打卡');
return;
}
//打卡成功
this.api.showComToast('打卡成功');
//傳參
uni.$emit('locationinfo',{address: this.address, lng: this.longitude, lat: this.latitude});
//返回
setTimeout(()=>{
uni.navigateBack();
}, 2000)
}
}
}
</script>
<style lang="scss">
.info-pt{
background-color: #FFFFFF;
.row-pt{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #EFEFEF;
padding: 20rpx 20rpx;
font-size: 24rpx;
.lt-pt{
color: #999999;
width: 80%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
.val-pt{
color: #007AFF;
}
}
.rt-pt{
border-radius: 15rpx;
padding: 10rpx 30rpx;
}
}
}
.map{
width: 750rpx;
height: calc(100vh - var(--status-bar-height) - 45px - 43px - 43px);
}
.popup-view {
width: 500rpx;
}
.popup-title {
display: block;
font-size: 16px;
line-height: 3;
margin-bottom: 10px;
text-align: center;
}
.popup-buttons button {
margin-left: 4px;
margin-right: 4px;
}
.uni-flex {
display: flex;
flex-direction: row;
}
.uni-flex-item {
flex: 1;
}
</style>
?完！??！
原文鏈接：https://ly9527.blog.csdn.net/article/details/120414518
- 上一篇：沒有了
- 下一篇：沒有了
相關推薦
- 2022-09-16 c#解析jobject的數據結構_C#教程
- 2022-12-14 VSCode如何巧用正則表達式快速處理字符段_相關技巧
- 2022-05-24 C#多線程TPL模式下使用HttpClient_C#教程
- 2022-06-07 redis復制有可能碰到的問題匯總_Redis
- 2022-01-30 composer 安裝包，提示找不到對應的包，很奇怪的問題，備忘
- 2022-09-13 ios開發Flutter之數據存儲_IOS
- 2022-05-10 SpringBoot端口已占用解決：配置端口號
- 2022-05-23 python中3種等待元素出現的方法總結_python
- 欄目分類
-
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速