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


相关文章
|
20天前
|
运维 小程序 前端开发
结合圈层营销策略,打造稳定可靠的圈子app系统,圈子小程序!
圈子系统是一种社交平台,用户可按兴趣、职业等创建或加入“圈子”,进行内容发布、讨论和资源共享。开发时需考虑需求分析、技术选型(如PHP、MySQL)、页面设计、功能实现(注册、登录、发布、评论等)、测试优化及运维管理。圈层营销则通过精准化、高端化的方式传递品牌信息,增强客户归属感。圈子小程序基于微信等平台,具备跨平台、便捷性和社交性,开发过程中需明确需求、选择技术框架、设计页面并确保稳定性和流畅性。
113 9
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
855 1
|
7天前
|
小程序 数据挖掘
圈子系统兴趣讨论群组的创建,社群运营的重要性及策略制定,同城交友app、小程序方式的创新
### 圈子系统与社群运营简介 圈子系统是社交平台中的功能模块,允许用户创建和管理兴趣小组,设置名称、规则等,吸引志同道合者加入。通过浏览不同圈子,用户可以选择感兴趣的群体参与。社群运营则通过对具有共同需求或兴趣的用户进行组织和管理,提升品牌影响力和商业价值。有效的社群运营策略包括明确定位、制定策略、持续输出有价值内容、定期举办活动、合理分配角色及数据监测优化,从而增强用户粘性和活跃度。 **圈子系统源码获取:** [链接](https://gitee.com/multi-customer-software/qz)
51 9
|
14天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
123 18
|
20天前
|
JSON 人工智能 算法
探索大型语言模型LLM推理全阶段的JSON格式输出限制方法
本篇文章详细讨论了如何确保大型语言模型(LLMs)输出结构化的JSON格式,这对于提高数据处理的自动化程度和系统的互操作性至关重要。
|
21天前
|
移动开发 小程序 前端开发
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
103 3
|
1月前
|
缓存 移动开发 小程序
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
80 8
|
20天前
|
小程序 算法 安全
语音交友小程序APP开发/交友小程序软件开发/PC独立后台管理+会员
本方案涵盖语音交友小程序APP开发、交友小程序软件开发及PC独立后台管理加会员系统。小程序功能包括语音匹配、群聊派对、动态广场和个人中心,支持点赞、评论等社交互动,优化用户体验。PC后台管理系统实现用户、内容和数据分析管理,会员系统提供注册、积分、等级等功能,确保数据安全并提升运营效率。
55 0
|
21天前
|
小程序 安全 网络安全
清晰易懂!陪玩系统源码搭建的核心功能,陪玩小程序、陪玩app的搭建步骤!
陪玩系统源码包含多种约单方式、实时语音互动、直播间与聊天室、大神申请与抢单、动态互动与社交及在线支付与评价等核心功能。搭建步骤包括环境准备、源码上传与解压、数据库配置、域名与SSL证书绑定、伪静态配置及后台管理。注意事项涵盖源码安全性、二次开发、合规性和技术支持。确保平台安全、合规并提供良好用户体验是关键。
|
2月前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
81 3