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

1.使用uni.getLocation()获取位置信息
2.下载qqmap-wx-jssdk.js插件插件下载地址
3.使用腾讯位置服务器对经纬度进行一个地址信息转换(自己创建一个应用即可)

在这里插入图片描述
全都勾选上
在这里插入图片描述
4.注意!!关键之处!! 一定要在微信公众号平台上 服务器配置 apis.map.qq.com
在这里插入图片描述

在这里插入图片描述

上代码
template

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

js

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('用户点击取消');
							}
						}
					});
				}
			});
		}
		}

效果图
在这里插入图片描述
在这里插入图片描述

完结~

不当之处望指点

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐