uniapp微信小程序获取当前定位

最新推荐文章于 2024-10-17 13:07:34 发布

风情，更与何人说

最新推荐文章于 2024-10-17 13:07:34 发布

阅读量408

点赞数 1

分类专栏：前端 uniapp 文章标签：微信小程序 uni-app 小程序

本文链接：https://blog.youkuaiyun.com/Shuai_YeYe/article/details/128914817

版权

前端同时被 2 个专栏收录

13 篇文章

订阅专栏

uniapp

1 篇文章

订阅专栏

本文介绍了如何在uniapp中使用腾讯地图的JavaScriptSDK，包括在腾讯地图官网申请密钥key，引入SDK到项目，以及实现微信小程序的定位授权功能。在用户授权后，通过uniapp的getLocation接口获取经纬度，再利用腾讯地图SDK进行逆向地理编码，获取当前位置的城市信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、申请密钥key

https://lbs.qq.com/ 腾讯申请地址，没注册的先注册，然后进入控制台
创建应用,添加key
uniapp授权
在腾讯地图上下载微信小程序javaScript SDK放入项目里，地址https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
引入项目，路径自行改

二、项目使用代码

提示，引入可能会报错，修改如下

在这里插入图片描述

代码使用

    // 1、引入SDK核心类，js文件根据自己业务，位置可自行放置
	import QQMapWx from '@/js_sdk/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js'
	// 2、实例化API核心类
	const qqmapSdk = new QQMapWx({
		key: '*********'
	});
	// 3、获取微信定位授权方法
			getAuthorize() {
				// #ifdef MP-WEIXIN
				uni.authorize({
					scope: 'scope.userLocation',
					success: (res) => {
						this.getLocation('gcj02');
					},
					fail: (err) => {
						uni.showModal({
							content: '需要授权位置信息',
							confirmText: '确认授权'
						}).then(res => {
							if (res['confirm']) {
								uni.openSetting({
									success: res => {
										if (res.authSetting['scope.userLocation']) {
											uni.showToast({
												title: '授权成功',
												icon: 'none'
											})
										} else {
											uni.showToast({
												title: '授权失败',
												icon: 'none'
											})
										}
										this.getLocation('gcj02')
									}
								})
							}
							if (res['cancel']) {
								// 取消授权
								this.getLocation('gcj02')
							}
						})
					}
				})
				// #endif
				// this.getLocation('wgs84');
			},
	// 4、开始获取定位方法
			getLocation(type) {
				uni.getLocation({
					type: type,
					// geocode:true,//设置该参数为true可直接获取经纬度及城市信息
					success: (res) => {
						
						const {
							latitude,
							longitude
						} = res;


						
						qqmapSdk.reverseGeocoder({
							location: latitude ? `${latitude},${longitude }` : '',
							sig: '**************', // 这个sig就是上面要准备的第二项SK
							success: (val) => {
								console.log('这就是要获取的当前所在城市的相关信息', val)
								
							},
							fail: (err) => {
								console.log('获取城市失败')
							}
						})
					},
					fail: (err) => {
						uni.stopPullDownRefresh();
						if (err.errMsg === 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF' || err
							.errMsg === 'getLocation:fail system permission denied') {
							uni.showModal({
								content: '请开启手机定位服务',
								showCancel: false
							})
						} else if (err.errMsg === 'getLocation:fail:system permission denied') {
							uni.showModal({
								content: '请给微信开启定位权限',
								showCancel: false
							})
						}
					}
				})
			},