uniapp微信小程序uni.getLocation获取位置(经纬度)之逆地址解析获取城市信息

前言:我好像隐隐约约的记得前几个月用uniapp开发微信小程序使用API接口uni.getLocation好像能获取到城市信息,但是现在只能获取到经度、纬度了,然后去看了一下uniapp官网发现仅App端支持......好吧!那可能是我记错了,也没关系,竟然能获取到经度和纬度那我们就使用第三方接口来处理。去网上找了一下腾讯位置服务可以为我们提供一个叫逆地址解析接口刚好可以满足我们的需求,那就用这个来实现吧!!

1.配置全局属性

在获取位置前我们需要在manifest.json文件配置一下requiredPrivateInfospermission全局属性才可以正常的使用。 

配置permission属性:点开manifest.json选择微信小程序配置勾选位置接口在描述里面填上描述文字然后在源码视图里面查看就会多出图二中标注二的内容配置。

配置requiredPrivateInfos属性:在mp-weixin里面加上requiredPrivateInfos属性配置上你需要使用的接口名字就好了,这里我只配置了getLocation。

f63aa78c93ba4ad0a7944e9c4f5f90f7.png

3099f72bb18d4bf2967d5164bc4b3c51.png

2.配置腾讯位置服务得到对应的Key和js文件

具体的配置步骤在下方图片你们看着这个官网来弄,配置好就会得到对应的Key再把下载的js文件放在项目的静态文件夹里。

f045f4a65e584b35a3717e7ec1871713.png

 3.获取位置信息

获取位置信息的方法步骤:

  1. 引入你在腾讯位置服务下载好的js文件
  2. 使用uni.authorize()发起授权申请
  3. uni.getLocation()接口得到位置对应的经纬度
  4. 把得到的经纬度传给逆地址解析接口

 按照上面的步骤写好代码以后持行会返回包含城市信息的对象然后我们就可以使用了,具体的代码如下:

// 导入腾讯位置服务js
import QQMapwx from '../../common/qqmap-wx-jssdk1.1/qqmap-wx-jssdk.min.js'

// 获取位置信息
getLocation() {
	var _this = this
	uni.authorize({
		scope: 'scope.userLocation',
		success() {
			uni.getLocation({
				type: 'wgs84',
				isHighAccuracy: true,
				success: function(res) {
					console.log(res)
					// 腾讯位置服务
					const qqmapsdk = new QQMapwx({
				    	key: '你得到的Key'
					});
					qqmapsdk.reverseGeocoder({
						// 通过纬度 经度来查询地址
						location: {
							latitude: res.latitude,
							longitude: res.longitude
						},
						success: (re) => {
							console.log(re)  // 城市信息
							_this.location = re.result.ad_info.city
						}
					})
				},
				fail(res) {
					uni.showToast({
						title: '获取失败',
						icon: 'error',
						duration: 2000
					})
					console.log(res)
				}
			})
		}
	})
}

有的小伙伴就觉得使用第三方的接口会不会收钱呀,这个我们可以去腾讯位置服务官网看看介绍就知道了,下面就是官网的说明,看我标注的地方写道免费配额大家应该就知道是不是免费了。我们使用的是逆地址解析,个人开发者每日可免费调用10000次,企业开发者每日可以免费3000000次完全是够用的,除非你为大企业定制一天需要用到超过3000000次定位的小程序,需要额外的去申请

47a6571089e94703aa38db00cc90744e.png

没关注的小伙伴点点关注!!!!

<think>我们已知在微信小程序中,uni.getLocation()的success回调中只有经纬度信息,没有详细地址。因此,我们需要使用腾讯地图API(或其他地图API)的反地址解析地理编码)功能来将经纬度转换为详细地址。根据引用[2]和[3]提供的信息,我们可以使用腾讯地图的JavaScriptSDK(微信小程序版本)来实现。步骤如下:1.在腾讯地图开放平台申请密钥(key)。2.在小程序后台设置request合法域名,添加腾讯地图的域名(https://apis.map.qq.com)。3.下载腾讯地图微信小程序JavaScriptSDK,并引入到项目中(或者直接使用其提供的npm包,但微信小程序支持npm,在uniapp中也可以使用,不过这里为了简便,我们使用直接引入js文件的方式)。4.在需要的地方使用uni.getLocation获取经纬度,然后调用腾讯地图的reverseGeocoder方法进行地址解析。但是,引用[3]中已经给出了部分代码示例,我们可以在此基础上完善。注意:在微信小程序中使用腾讯地图API,需要配置request合法域名,包括:https://apis.map.qq.com。另外,腾讯地图的地址解析接口需要密钥。完整代码示例:步骤1:在项目中引入腾讯地图SDK我们可以将SDK下载到本地,放在项目目录中(例如:utils/qqmap-wx-jssdk.min.js)。下载地址:https://mapapi.qq.com/web/miniprogram/QQMapWX-JSSDK1.2/qqmap-wx-jssdk.min.js步骤2:在页面或组件中使用以下是一个完整的页面示例(假设我们在一个页面的onLoad中获取位置并转换):</think>在 UniApp 微信小程序中,将 `uni.getLocation` 获取经纬度转换为详细地址,需要使用腾讯地图的地址解析 API。以下是完整代码示例: ### 完整实现代码 ```javascript // 1. 引入腾讯地图SDK (下载地址:https://mapapi.qq.com/web/miniprogram/QQMapWX-JSSDK1.2/qqmap-wx-jssdk.min.js) import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'; // 放在项目utils目录 export default { data() { return { address: "正在获取位置...", QQMapKey: "您的腾讯地图KEY" // 需到腾讯位置服务官网申请 } }, onLoad() { this.getLocationDetail(); }, methods: { getLocationDetail() { // 2. 初始化地图实例 const qqmapsdk = new QQMapWX({ key: this.QQMapKey }); // 3. 获取当前位置经纬度 uni.getLocation({ type: 'gcj02', // 微信小程序必须用gcj02坐标系 success: (res) => { // 4. 地址解析经纬度→地址) qqmapsdk.reverseGeocoder({ location: { latitude: res.latitude, longitude: res.longitude }, success: (addressRes) => { const addressInfo = addressRes.result; this.address = ` ${addressInfo.address} ${addressInfo.formatted_addresses.recommend} `; // 5. 存储关键信息(可选) uni.setStorageSync('city', addressInfo.address_component.city); }, fail: (err) => { console.error('地址解析失败', err); this.address = "地址解析失败,请重试"; } }); }, fail: (err) => { console.error('获取位置失败', err); this.address = "获取位置失败,请检查权限设置"; } }); } } } ``` ### 关键配置步骤 1. **申请腾讯地图Key** - 访问[腾讯位置服务官网](https://lbs.qq.com/)注册账号 - 创建应用 → 选择「微信小程序」→ 填写小程序AppID - 获取开发者密钥(Key) 2. **配置manifest.json** ```json // manifest.json "mp-weixin": { "permission": { "scope.userLocation": { "desc": "需要获取您的位置以提供本地服务" } } } ``` 3. **配置request域名** 在小程序后台 → 开发管理 → 开发设置 → 服务器域名添加: ``` request合法域名:https://apis.map.qq.com ``` ### 注意事项 1. **坐标系要求**:微信小程序必须使用 `gcj02` 坐标系(高德/腾讯坐标系) 2. **权限声明**:首次调用需用户授权,建议在 `onLoad` 时触发 3. **错误处理**: - 用户拒绝定位时提示手动开启权限 - 腾讯API每日调用限额需注意(免费额度1万次/日) 4. **地址组成**: ```javascript addressRes.result = { address: "广东省深圳市南山区科技园", // 标准地址 formatted_addresses: { recommend: "腾讯大厦" // 地标推荐 }, address_component: { // 地址组件 province: "广东省", city: "深圳市", district: "南山区" } } ``` ### 常见问题解决 - **定位失败**:检查小程序后台位置权限配置[^1] - **解析报错**:确认腾讯地图Key和小程序AppID绑定正确[^2] - **精度问题**:安卓设备建议添加 `highAccuracyExpireTime: 5000` 参数 - **开发版白名单**:测试时需在腾讯地图控制台添加开发者微信号 > 实际效果:<br> > ![地址解析效果](https://example.com/map-demo.jpg) > *图:地址解析效果示意图[^3]*
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值