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


相关文章
|
30天前
|
JSON 小程序 UED
微信小程序 app.json 配置文件解析与应用
本文介绍了微信小程序中 `app.json` 配置文件的详细
137 12
|
30天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
27 0
|
2月前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
90 11
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
2月前
|
前端开发 搜索推荐 PHP
大开眼界!uniapp秀操作,陪玩系统新功能,陪玩app源码,可实时互动随心优化!
多客游戏陪玩系统采用前端uniapp与PHP语言,实现全开源、易改造,RTC传输协议确保低延迟语音连麦,分布式部署应对高并发。功能创新包括游戏约单、多人语音聊天室、动态广场、私信聊天等,提供高端社交和个性化服务,满足各类需求,让玩家畅享游戏乐趣。
|
2月前
|
前端开发 数据库 UED
uniapp开发,前后端分离的陪玩系统优势,陪玩app功能特点,线上聊天线下陪玩,只要4800
前后端分离的陪玩系统将前端(用户界面)和后端(服务器逻辑)分开开发,前者负责页面渲染与用户交互,后者处理数据并提供接口。该架构提高开发效率、优化用户体验、增强可扩展性和稳定性,降低维护成本,提升安全性。玩家可发布陪玩需求,陪玩人员发布服务信息,支持在线聊天、预约及线下陪玩功能,满足多样化需求。[演示链接](https://www.51duoke.cn/games/?id=7)
|
2月前
|
PHP
全新uniapp小说漫画APP小说源码/会员阅读/月票功能
价值980的uniapp小说漫画APP小说源码/会员阅读/月票功能
131 20
|
3月前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
138 3
|
4月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
926 1
|
4月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
755 0

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 4
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 5
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 6
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 7
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 9
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程