uniapp获取当前的地理位置
uniapp获取当前地理位置及相关逻辑交互
·
uniapp获取当前的地理位置
— 不管几岁,快乐万岁—
相关文档
注意:
uni.authorize
不支持APP/H5,具体看文档,这里介绍用于微信小程序~
效果图
抽取JS文件
- 这里抽取到一个js文件
import store from '@/store/index.js'
var optionCallback = null; // 接收回调函数
export const isLocation = (options) => {
optionCallback = options;
uni.authorize({
scope: 'scope.userLocation',
success: (res) => {
let location = uni.getStorageSync('location');
if (!location) {
// 未授权
isGetLocation();
} else {
// 已授权 回调
if (optionCallback != null) {
optionCallback('auth');
}
}
},
fail: (err) => {
// 执行失败,弹窗提示是否授权
uni.getSetting({
success: (result) => {
if (!result.authSetting['scope.userLocation']) {
isOpenAuth()
}
}
});
}
})
}
/**
* 获取当前的地理位置
*/
function isGetLocation() {
uni.getLocation({
type: 'gcj02',
success: (res) => {
let tmpLocation = {
latitude: res.latitude,
longitude: res.longitude
}
uni.setStorage({
key: 'location',
data: tmpLocation
});
// or store
// store.commit('setLocation', tmpLocation)
// 定位成功 回调
if (optionCallback != null) {
optionCallback('success');
}
},
fail: (err) => {
// 失败 回调
if (optionCallback != null) {
optionCallback('fail');
}
}
})
}
function isOpenAuth() {
uni.showModal({
content: '由于您还没有允许授权位置,无法定位,请点击确定允许授权',
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (result) => {
if (result.authSetting['scope.userLocation']) {
// 引导用户授权成功 调用获取位置接口
isGetLocation();
} else {
// console.log('失败')
}
}
});
} else {
uni.navigateBack({
delta: 1
})
}
}
});
}
使用
- 根据个人需求调整,你会发现这里demo点击按钮时再次检测是否已授权定位来执行逻辑。
- 因在
App.vue
的onLaunch()
调用获取位置API,如用户拒绝授权,点击按钮时引导用户重新授权。
<template>
<view class="content">
<image class="logo" src="/static/click-here.gif"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<button class="button" type="primary" @click="lookMap">使用地图查看位置</button>
</view>
</template>
<script>
// 引入 JS 文件
import { isLocation } from '@/common/js/localtion.js'
export default {
data() {
return {
title: ''
}
},
computed: {
storeLocation() {
return this.$store.state.curLocation;
}
},
watch: {
// 监听获取 store 定位数据
storeLocation: function(nVal, oVal) {
// 授权定位成功后,执行相关的逻辑
this.getLocationInfo();
}
},
onLoad() {
},
methods: {
/**
* 查看地图
*/
lookMap() {
// #ifdef MP
isLocation((res) => {
if (res == 'auth') {
// 已授权啦 执行相关逻辑
// 使用地图查看位置
this.openMapByLocation();
} else {
// 授权定位成功后,需执行相关的逻辑
this.getLocationInfo();
}
})
// #endif
},
/**
* 获取定位信息
*/
getLocationInfo() {
// 获取经纬度
let location = uni.getStorageSync('location');
if (location) {
this.location = location;
// 根据需求 执行相关逻辑
this.getReverseAddress();
}
},
getReverseAddress() {
},
/**
* 使用地图查看位置
*/
openMapByLocation() {
uni.openLocation({
latitude: 22.543687,
longitude: 114.059625,
name: '去哪?叮一下~',
fail: (e) => {
uni.showModal({
content: '打开地图失败,请稍后重试'
})
},
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.button {
margin-top: 30rpx;
}
</style>
更多推荐
已为社区贡献14条内容
所有评论(0)