uni-app获取位置信息(经纬度转换地址信息)

别改我bug

已于 2022-08-30 20:50:44 修改

阅读量1.1w

点赞数 2

分类专栏： uniapp 文章标签： uni-app javascript 前端

于 2022-08-30 20:05:52 首次发布

本文链接：https://blog.csdn.net/JunVei/article/details/126611192

版权

uniapp 专栏收录该内容

6 篇文章 4 订阅

订阅专栏

uniapp获取位置信息，获取到的信息为经纬度，再通过转换成地址信息

1.使用uni.getLocation()获取位置信息
2.下载qqmap-wx-jssdk.js插件插件下载地址
3.使用腾讯位置服务器对经纬度进行一个地址信息转换(自己创建一个应用即可)
在这里插入图片描述
全都勾选上

4.注意！！关键之处！！一定要在微信公众号平台上服务器配置 apis.map.qq.com

在这里插入图片描述

上代码
template

<view><button @click="getLocation">获取位置</button></view>

methods: {
		// 获取当前位置
		getLocation() {
			const that = this;
			// 获取位置信息
			uni.getLocation({
				type: 'wgs84',
				success(res) {
					// 经纬度转化地址信息
					const qqmap = require('@/pages/qqmap-wx-jssdk.min.js');
					const showmap = new qqmap({
						key: 'NWSBZ-ZUME4-LLTU6-XSQGB-YBKAT-U4FCZ'
					});
					// 逆地址解析reverseGeocoder
					showmap.reverseGeocoder({
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						success(result) {
							// 地址信息
							const adres = result.result.address;
							that.address = adres;
							console.log(adres);
							// 此处使用的this不是指向vc
							// 所在在头部先获取到this复制给that
						}
					});
				},
				fail(e) {
					let errMsgTit = '';
					if (e.errMsg === 'getLocation:fail auth deny') {
						errMsgTit = '你已拒绝授权，是否跳转至设置页面开启权限';
					} else {
						errMsgTit = '操作频繁提示，建议搭配onLocationChange()使用';
					}
					uni.showModal({
						title: '提示',
						content: `${errMsgTit}`,
						success(res) {
							if (res.confirm) {
								// 获取设置页面权限信息
								uni.getSetting({
									success(res) {
										console.log(res.authSetting);
										// 判断是否开启获取位置权限
										if (!res.authSetting['scope.userLocation']) {
											// 如果没有开启，点击确认后打开设置页面
											uni.openSetting({});
										}
									}
								});
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			});
		}
		}