uniApp微信小程序之——获取腾讯地图的定位功能以及解决uni-app提示getLocation 需要在app.json中生命permission字段的方法

简介: 获取腾讯地图的定位功能以及解决uni-app提示getLocation 需要在app.json中生命permission字段的方法

获取腾讯地图的定位功能

首先打开网址

腾讯位置服务 - 立足生态,连接未来

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

efb2eed4103940db97eab3f22be0ddb4.png

下载即可

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

f48ae74c02c741a1be47fd1f29784648.png

使用min.js的包放入common里

7e9f64673f2b49959d4f423ddb725270.png

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

ddcc9e34370f4bccad7105d67a05ed62.png

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

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

b5b6dcbe213a4ac0ac97bff15ccb2a14.png

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

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

93fe070c6d704029ae9fee0a182d73d8.png

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

2c4457f0998544d18383d75614a9cde6.png

点击编辑

c0b0cf94ff3f4776885ca5959ce92a9f.png

勾选这三个√

5bcdc122970c477795b1b57f371bcace.png

保存

0dd1d0baaa034c219a57c4dbaafa4f19.png

e54b236517a84fd6a77e938d67c2e564.png

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

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

87ea3b0cf5384c4d9904a5c9392a8dfc.png

success

f8f6c6a9ff354b1895b5501f7062bd2d.png

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

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

804183ae849c48f9b3bc8cdafd54d658.png

打印结果如下:

2e0f12dcaf0f4f1e9ded06e6c4b1de23.png

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

通过逆地址解析进行操作

76cc5fa9685a4db9b6ce3247f5434b2b.png

153c9ee7202c429498cd74b26e835b95.png

5e20b7ed59924bcfb72170735afef94c.png

完整代码如下 :

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);
      }
      })
       }
    });
  },

获取成功!!

5b877bc784e3411195782ce07040dab6.png

最后渲染这个数据即可

可以创建一个空的字符串

14c041b6541d4376b860dd24f2048b43.png

6fc46909217e4656bb4bf6c6b38c6bff.png

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

9d66d6d9ace84c588e9d465ebdcebf57.png

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

途中出现的问题以及解决方案

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

e5a4f3c8535f4b4c8531d5bb321bfd91.png

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

39f71bd60f7647e1afabfaab496d0d69.png


相关文章
|
小程序 搜索推荐 JavaScript
引入小程序平台对app有啥好处
引入小程序平台对app有啥好处
687 155
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
5343 1
|
小程序 安全 JavaScript
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
1369 1
构建即时通讯APP内的小程序生态体系:从架构设计到技术实现-优雅草卓伊凡
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
人工智能 小程序 前端开发
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
1023 0
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
|
存储 人工智能 移动开发
uni-app+vue3接入deepseek-v3搭建跨端ai流式(小程序+app+h5)
基于Uniapp+Vue3+Markdown接入DeepSeek-V3聊天大模型,支持编译到H5+小程序+App端。实现流式输出、支持亮色/暗黑主题、代码高亮、会话本地存储等功能。
2534 12
|
小程序 Java 关系型数据库
圈子系统公众号app小程序系统源码圈子系统带即时通讯 多级圈子系统源码 兴趣小组系统开源 私密圈子系统代码 会员制社区系统
本圈子系统解决方案提供即时通讯、多级圈子、兴趣小组、私密社区及会员制管理功能。支持开源与商业方案,推荐ThinkSNS+、EasyClub及OpenFire等系统,并提供前后端技术选型建议,助力快速搭建社交平台。
739 0
|
人工智能 开发框架 小程序
工会成立100周年纪念,开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年,特推出基于AI技术的智能健身系统,以小程序和APP形式呈现,助力职工健康生活。方案包括:1) 小程序插件,支持多种运动识别,开箱即用;2) APP插件,提供更高精度的运动检测;3) 成熟的「AI乐运动」系统,支持赛事活动管理。这些方案满足不同需求,推动全民健身体验升级,彰显工会对职工健康的关怀。
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
1644 3
|
JSON 小程序 UED
微信小程序 app.json 配置文件解析与应用
本文介绍了微信小程序中 `app.json` 配置文件的详细
2820 12