查看: 69|回覆: 1

[教程] uniApp微信小程序使用腾讯地图定位功能及getLocation需要在app.json中声明permission字段问题解决

[複製鏈接]

2

主題

0

回帖

0

積分

热心网友

金币
0
閲讀權限
220
精華
0
威望
0
贡献
0
在線時間
0 小時
註冊時間
2012-4-3
發表於 2022-12-24 13:22:18 | 顯示全部樓層 |閲讀模式

获取腾讯地图的定位功能 

首先打开网址:腾讯位置服务

找到这三个位置并下载第3步的包

下载即可 

 解压完毕后有两个js文件,这里用min.js的包即可

 使用min.js的包放入common里

 用在哪个页面就在哪个页面中引入

	var QQMapWX = require('../../common/lib/qqmap-wx-jssdk.min.js'); 

接下来在onLoad中使用下面这段代码(当然也可以放入mounted里面)

qqmapsdk = new QQMapWX({
    key: '申请的key'
});

 这里的秘钥需要从官网中自己创建

创建好后会自动生成秘钥复制粘贴下来即可 

点击编辑 

勾选这三个√ 

保存

 

uni.getLocation({
    type: 'wgs84',
    success: function (res) {
        console.log('当前位置的经度:' + res.longitude);
        console.log('当前位置的纬度:' + res.latitude);
    }
});

 这里面的wgs84 uniApp官网中也给出了详细的解释

 success

latitude纬度,浮点数,范围为-90~90,负数表示南纬
longitude经度,浮点数,范围为-180~180,负数表示西经

打印结果如下: 

 拿到经纬度后通过经纬度返回他的地址

通过逆地址解析进行操作

完整代码如下 :

data(){
    return{
        qqmapsdk:{}
    }
}
onLoad() {
			this.qqmapsdk = new QQMapWX({
				key: 'XFIBZ-74JKO-3XCW3-SDVGT-FVOVF-RBFAS'
			});
			uni.getLocation({
			    type: 'wgs84',
			    success: (res)=> {
			        console.log('当前位置的经度:' + res.longitude);
			        console.log('当前位置的纬度:' + res.latitude);
					this.qqmapsdk.reverseGeocoder({
						success:(res)=>{
							console.log(res);
						}
					})
			    }
			});
		},

获取成功!!

最后渲染这个数据即可

可以创建一个空的字符串

用标签调用一下address即可完成 

  

注意:这个时候的数据并不一定是你现在的地址,因为是模拟器的环境。切换到真机测试即可看到您所在的地理位置

途中出现的“getLocation需要在app.json中声明permission字段”问题以及解决方案

 如果出现以下情况,请在manifest.json中添加以下代码

"permission": {
		  "scope.userLocation": {
		   "desc": "你的位置信息将用于小程序位置接口的效果展示"
		  }
		 },

以上就是

微信小程序使用腾讯地图定位功能及getLocation需要在app.json中声明permission字段问题解决的详细内容,更多关于uniApp微信小程序使用腾讯地图定位功能的资料请关注琼殿技术社区其它相关文章!

您可能感兴趣的文章:
  • 微信小程序学习(4)-系统配置app.json详解
  • 微信小程序getLocation 需要在app.json中声明permission字段
  • 微信小程序开发app.json全局配置实战指南
  • 微信小程序开发报:“app.json未找到”错误的原因与解决方法
回覆

使用道具 舉報

0

主題

720

回帖

4441

積分

琼殿精英

金币
3721
閲讀權限
220
精華
0
威望
0
贡献
0
在線時間
0 小時
註冊時間
2011-10-11
發表於 2026-5-9 16:32:21 | 顯示全部樓層
顶一个!刚好最近在做小程序需要用到定位功能,写的非常详细,帮了大忙了!

按照你的教程操作基本上都成功了,不过有几点想补充一下:

1. 关于 key 的问题:申请 key 的时候需要绑定小程序 的 AppID,不然会提示 key 不合法哦~

2. 真机测试的时候注意看一下手机设置里的定位权限有没有开启,有时候模拟器没问题真机却不行就是因为这个。

3. 除了在 manifest.json 配置 permission,如果是用微信开发者工具测试,还得在微信开发者工具的“详情”->“本地设置”里勾选“不校验合法域名”那个选项,不然调用腾讯地图的接口会报错。

还有那个逆地址解析(reverseGeocoder)返回的数据挺多的,如果只要详细地址可以直接用 result.ad_info.province + result.ad_info.city + result.ad_info.district + result.address 这样拼接。

总之非常感谢楼主的分享,收藏了!希望以后能出更多这种实战教程~

mark 一下,防止以后找不到
回覆

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即注册

本版積分規則

相关侵权、举报、投诉及建议等,请发 E-mail:qiongdian@foxmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部