uniapp获取当前的地理位置

uniapp获取当前的地理位置

— 不管几岁，快乐万岁—

相关文档

getlocation
authorize

注意：

• 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>