uni-app中使用腾讯地图sdk(解析经纬度)获取用户所在位置信息

前言: 技术选定
https://lbs.qq.com/dev/console/custom/apply
在这里插入图片描述
具体步骤:

  1. 注册开发者账号、申请密钥、开通webserviceAPI服务、下载小程序SDK、微信后台配置请求request域名。
    在这里插入图片描述
    ( 请按官方完成以上操作:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview )
    注意点:
    下载微信的sdk,考虑网络问题(点击没反应),直接F12 找到那串地址copy到地址栏,进行回车;
    SDK那串地址:( http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip )
    微信公众平台中配置request请求域名,注意找对位置及域名直接分号隔开,添加成功后微信开发者工具刷新;
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  2. copy解压后的 qqmap-wx-jssdk.js文件放到项目中,然后在页面引入使用
    [ uni-app中我们使用 qqmap-wx-jssdk.js 这个文件就好(另一个.min.js不管)]
    在这里插入图片描述
    3.上代码
    1.uni.getLocation方法 负责获取用户所在经纬度;
    2.使用腾讯sdk 的reverseGeocoder方法解析经纬度–拿到用户省市区街道信息;
<template></template><script>//引入腾旭地图sdkimport QQMapWX from '../../untils/qqmap-wx-jssdk.js'import app from '../../App.vue'export default {data() {return {title: 'Hello index'}},onLoad() {//拿地址this.getMapAddress();},methods: {getMapAddress() {const tMap = new QQMapWX({key: '4DABZ-MTZ2R-PZLW2-WX6FG-W5IXE-APFAF' //开发者密钥});//使用 uni.getLocation获取用户所在经纬度uni.getLocation({type: 'wgs84',geocode: true,success: (res) => {console.log("获取经纬度成功");this.latitude = res.latitude;this.longitude = res.longitude;},fail: () => {console.log("获取经纬度失败");},complete: () => {// 使用腾讯sdk的reverseGeocoder方法 解析经纬度tMap.reverseGeocoder({location: {latitude: this.latitude,longitude: this.longitude},success: function(res) {console.log("解析地址成功", res);console.log("当前地址:", res.result.address);//保存缓存uni.setStorage({key:'local',data:res.result.address,success() {console.log("用户地址信息已缓存")}})},fail: function(res) {uni.showToast({title: '定位失败',duration: 2000,icon: "none"})console.log(res);},complete: function(res) { //无论成功失败都会执行wx.switchTab({url: '../appointment/appointment'})}})}})}}}
</script><style></style>

点击获取弹框提示信息:
在这里插入图片描述
解决方法:
在xhbuilder中的manifest.json文件中添加如下代码:(这里的提示信息,用于微信获取位置弹框中----自定义的描述文字)

 "permission" : {"scope.userLocation" : {"desc" : "你的位置信息将用于小程序定位" //}}

在这里插入图片描述
在这里插入图片描述
如下图:现在应该知道那串—描述文字的作用了吧。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

uni-app中使用腾讯位置服务实现小程序地图选点功能
https://gblfy.blog.csdn.net/article/details/122266518

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/516304.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

4月数据库流行度排行出炉:MySQL 成事实王者

2020年4月DB-Engines 数据库流行度排行出炉。在本月的排行榜上&#xff0c;Oracle 较上月微涨 4.78 分&#xff0c;MySQL 微涨 8.62 分&#xff0c;甲骨文公司成为最大赢家。而微软的两个产品 Microsoft SQL Server 下降 14.43 分&#xff0c;Microsoft Access 下降 3.22分&…

MySQL 在 Mac 环境下的安装

目录 Mac 系统配置 MySql 数据库1. 安装 MySql 数据库2. 安装 MySql Workbench 可视化工具Mac 系统配置 MySql 数据库 1. 安装 MySql 数据库 1.1 双击打开安装包 mysql-8.0.19-macos10.15-x86_64.dmg: 1.2 双击 mysql-8.0.19-macos10.15-x86_64.pkg 运行安装包,并点击 继续…

微信小程序console.log出来的是object的问题解决方法

在开发微信小程序的时候&#xff0c;从后台传过来的数据没有问题&#xff0c;但是在开发的过程中&#xff0c;console.log出来的结果为object。 解决方案&#xff1a; 把加好改为逗号,即可

超大福利 | 这款免费 Java 在线诊断利器,不用真的会后悔!

线上系统为何经常出错&#xff1f;数据库为何屡遭黑手&#xff1f;业务调用为何频频失败&#xff1f;连环异常堆栈案&#xff0c;究竟是哪次调用所为&#xff1f; 数百台服务器意外雪崩背后又隐藏着什么&#xff1f;是软件的扭曲还是硬件的沦丧&#xff1f; 走进科学带你了解 A…

面试官:因为这个语言,我淘汰了90%的人!!

很多人都有这样的经历&#xff1a;大量重复性工作&#xff1b;日报、周报、各种报&#xff0c;无穷无尽&#xff1b;不计其数的数据提取琐碎繁杂的事务让工作的效率极低。如果可以一键完成就好了。对这些问题来说&#xff0c;最高效的解决途径就是 Python。1991 年&#xff0c;…

MySQL在Windows 环境中的安装

文章目录 MySQL 在 Windows 系统下的安装MySQL 在 Windows 系统下的安装 双击 mysql-installer-community-8.0.19.0.msi,启动 MySQL 安装程序。 如果弹框提示如下的警告信息,证明你的电脑需要安装额外的 .NET Framework 依赖包。此时,先退出 MySQL 的安装程序,然后双击 ND…

灵魂发明家自述:我就是靠这个创业成功的

扫描二维码&#xff0c;了解低代码的高科技 原文链接 本文为云栖社区原创内容&#xff0c;未经允许不得转载。

前端数据解构

案例&#xff1a; 数据如下&#xff1a; {success: true, code: 10000, data: {…}, message: "执行成功"} code: 10000 data:list: Array(7)0: {_id: "608b70ecf9d99a7594662466", id: "0", label: "热榜"}1: {_id: "608b70ec…

基于云存储网关的Veeam备份归档上云方案

前言 面对数据可靠性和合规性要求的不断增长&#xff0c;只备份一份数据已经不能满足用户对于数据可靠性的需求。传统备份厂商的异地备份方案是将用户生产环境里的数据备份至不同机柜或者异地机房来保护数据&#xff0c;规避单机房存在的机柜或机房断电断网等问题。公共云的出现…

阿里达摩院青橙奖“硬核10人”出炉,钟南山寄语青年科学家

9月9日&#xff0c;2020年阿里巴巴达摩院青橙奖获奖名单公布&#xff0c;梁文华等10位青年科学家获得达摩院的1000万元奖金。这群平均年龄不足32岁的科研后浪收到了中国工程院院士钟南山的鼓励&#xff1a;“你们处在最好的时候&#xff0c;要记得把握机遇。” 青橙奖是阿里巴巴…

vue 微信开发工具 Maximum call stack size exceeded

文章目录现象原因解决方案现象 某段代码出现了内存溢出的现象 原因 出现了死循环调用的代码片段 解决方案 仔细检查一下&#xff0c;很容易发现的 案例场景&#xff1a; [Vue warn]: Error in v-on handler: “RangeError: Maximum call stack size exceeded” (found in…

深源恒际上线二代个人信用报告OCR识别服务

1月中旬&#xff0c;央行征信中心启动了二代征信系统切换上线工作&#xff0c;开始面向社会公众和金融机构开放二代格式信用报告查询服务。随后&#xff0c;深源恒际及时跟进信用报告OCR识别产品的升级工作。目前产品迭代已完成&#xff0c;深源恒际将于本周内上线二代个人信用…

直播预告 | 阿里巴巴自研代码管理平台技术解密

4月23日&#xff0c;企业级一站式DevOps平台——阿里云云效正式开启公测&#xff0c;我们特别策划了《为云研发而生&#xff0c;解密云效公测版专场》视频直播活动&#xff0c;邀请了5位阿里巴巴技术专家通过视频直播的方式与大家在线交流&#xff0c;分享云效产品的亮点和技术…

1024程序员节开源技术英雄会,参会“英雄榜”发榜

10月23-25日&#xff0c;由CSDN等多家单位精心筹划的“长沙 中国1024程序员节”将盛大举行。程序员节活动以开源为主议题&#xff0c;包括2场岳麓尖峰对话&#xff1b;2020开源技术英雄大会&#xff1b;10场热门技术分论坛/峰会&#xff1b;创意集市&#xff1b;体验感超强的科…

uni-app 微信小程序授权登录

文章目录一、appID相关申请和配置1. appid获取方式2. appID配置二、获取用户基础数据2.1. 获取用户信息2.2. 获取用户信息2三、调用登录api3.1. 登录api3.2. 案例代码四、获取唯一标识信息4.1. 官网文档4.2. 接口简述五、绑定用户 实现登录5.1. 代码案例&#xff08;未封装&…

从图森未来的数据处理平台,看Serverless工作流应用场景

Serverless工作流来了&#xff01; 发布会传送门 抢先了解Serverless技术干货 4月&#xff0c;阿里云Serverless工作流正式商业化&#xff0c;这是一款用于协调多个分布式任务执行的全托管 Serverless 云服务。产品致力于简化开发和运行业务流程所需要的任务协调、状态管理以及…

uniapp 开发基础环境搭建和配置

文章目录一、下载并安装开发工具1. 官网下载2. 点击 DOWNLOAD3. 版本选择二、安装 sass 依赖2.1. 打开 HBuilder X2.2. 打开插件地址2.3. 导入插件2.4. 在弹出框中点击2.5. 点击【是】2.6. 下载状态2.7. 等待完成即可三、创建 uni-app 项目3.1. 创建项目3.2. 项目目录介绍一、下…

大厂技术文档:Python基础+爬虫+数据分析+面试经精选

有段时间没跟各位粉丝分享编程资源福利了&#xff0c;看了下自己的资料夹&#xff0c;就剩下我认为比较好的Python学习资料了。相信这套资料可以对你进阶高级工程师有帮助&#xff01;为什么只有Python这么火&#xff0c;能有机会成为通用语言&#xff1f;核心还是因为企业需要…

金融业务数字化,用户体验和安全防护双重挑战,你该怎么办?

在数字化转型的浪潮中&#xff0c;金融行业一直是最活跃的行业之一。受到新冠疫情影响&#xff0c;各商业银行、券商、保险企业的线上流量迅速攀升&#xff0c;线上金融业务将从互金时代直接跃迁到全面线上化时代。2月24日&#xff0c;中国银保监会下发的《关于进一步做好疫情防…

怎样用CDN防篡改、抗攻击、控内容?一份CDN安全指南请查收

5大安全产品全面升级&#xff0c;抢先了解&#xff1a;https://developer.aliyun.com/topic/securityapril 预约观看发布会&#xff1a;https://yq.aliyun.com/live/2670 阿里云CDN经过10多年的技术沉淀和实践&#xff0c;已经从传统的加速&#xff0c;逐渐构筑起一个边缘云的安…