uni-app根据经纬度逆解析详细地址

uni-app中的getLocation()方法可以获取到用户当前的地理位置(经纬度)、速度。

在这里插入图片描述
在这里插入图片描述

但是返回参数中的address在app中才会显示,小程序中不会显示,所以我们需要进行逆解析其地址,解析出它的地址信息。

1.首先要在腾讯位置服务中"控制台>应用管理>我的应用"中添加应用并生成Key

注意填写的appid是你项目用的appid,如果是测试,则勾选域名白名单即可,如果是正式项目,则需要在文本框里填写具体,(可选项:勾选授权ip,并将你本机电脑的ip及测试环境和正式环境的域名ip填入其中,勾选serveiceApi,里面写入域名)
在这里插入图片描述

2.去小程序后台开发管理-开发工具-服务器域名配置添加(https://apis.map.qq.com),添加完成之后去重新编译一下小程序并去开发者工具项目配置中刷新,如果看到有这个域名了则代表添加成功了
在这里插入图片描述
在这里插入图片描述

3.到这一步前期的准备工作已经做完了,接下来就直接上代码按钮

			getLocation() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						let location = res.latitude + ',' + res.longitude
						//调用逆解析接口
						uni.request({
							url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=location',//腾讯官方逆解析接口,可直接复制
							data: {
								location: location,
 
								'key': "xxxx-xxxx-xxxx-xxxx-xxxx-xxxx",//自己申请的Key
							},
							method: "GET",
							success(res) {
								console.log(res,'解析成功返回的参数');
							},
                            fail: res=> {
						        console.log(res.errMsg,'解析失败返回的错误信息');
					        }
						})
						//服务器域名的配置文件中“request合法域名”中需要添加调用的“https://apis.map.qq.com”
 
					}
				});
			},

请求成功后会得到如下图所示的返回参数

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Redis从头学-4】Redis中的String数据类型实战应用场景之验证码、浏览量、点赞量、Json格式存储

🧑‍💻作者名称:DaenCode 🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。 😎人生感悟:尝尽人生百味,方知世间冷暖。 📖所属专栏:Re…

Intelij IDEA 配置Tomcat解决Application Server不显示的问题

今天搭建war工程时部署项目发现,IDEA的控制台没有Application Servers,在网上查了一下,总结几个比较好的解决方法,为了方便自己和其他人以后碰到相同的问题,不再浪费时间再次寻找解决办法。 Intelij IDEA 配置Tomcat时…

如何做好科技文献资料的翻译!

我们知道,科技文献是工程技术人员的重要参考文献,翻译科技文献资料有助于促进国内外科技知识和技术的传播。那么,如何做好科技文献资料的翻译,专业科技文献翻译哪家好? 据了解,科技文献翻译是一种以应用为主…

Nginx虚拟主机(server块)部署Vue项目

需求 配置虚拟主机,实现一个Nginx运行多个服务。 实现 使用Server块。不同的端口号,表示不同的服务;同时在配置中指定,Vue安装包所在的位置。 配置 Vue项目,放在 html/test 目录下。 config中的配置如下&#xf…

接口测试,负载测试,并发测试,压力测试区别

接口测试 1.定义:接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换,传递和控制管理过程,以及系统间的相互逻辑依赖关系等。 2.目的&#xf…

Matlab中图例的位置(图例放在图的上方、下方、左方、右方、图外面)等

一、图例默认位置 默认的位置在NorthEast r 10; a 0; b 0; t0:0.1:2.1*pi; xar*cos(t); ybr*sin(t); A1plot(x,y,r,linewidth,4);%圆 hold on axis equal A2plot([0 0],[1 10],b,linewidth,4);%直线 legend([A1,A2],圆形,line)二、通过Location对legend的位置进行改变 变…

无涯教程-Perl - sysread函数

描述 该函数等效于C /操作系统函数read(),因为它绕过了诸如print,read和seek之类的函数所采用的缓冲系统,它仅应与相应的syswrite和sysseek函数一起使用。 它从FILEHANDLE中读取LENGTH个字节,并将输出放入SCALAR中。如果指定了OFFSET,则将数据从OFFSET字节写入SCALAR,从而有效…

小航助学GESP_C++一级模拟测试卷第2套(含题库答题软件账号)

需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统(含题库答题软件账号)_程序猿下山的博客-CSDN博客 需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统(含题库答题软件账号)_程序猿下山的博客-CSD…

【C++笔记】C++之类与对象(中)

【C笔记】C之类与对象(中) 1、类的构造函数1.1、构造函数的基本用法1.2、构造函数的7个特性 2、类的析构函数2.1、析构函数的基本用法2.2、析构函数的6个特性 3、类的拷贝构造函数3.1、拷贝构造的基本用法3.2、拷贝构造的“无限套娃”陷阱3.3、深拷贝与浅…

通过css设置filter 属性,使整个页面呈现灰度效果,让整个网页变灰

通过css设置filter 属性设置页面整体置灰 效果图: 通过设置 filter 属性为 grayscale(100%)&#xff0c;页面中的所有元素都会被应用灰色滤镜效果&#xff0c;使整个页面呈现灰度效果。 <style type"text/css"> html { filter: grayscale(100%); -webkit-f…

《Linux从练气到飞升》No.15 Linux 环境变量

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的…

C++函数模板和类模板

C另一种编程思想称为泛型编程&#xff0c;主要利用的技术是模板 C提供两种模板机制&#xff1a;函数模板和类模板 C提供了模板(template)编程的概念。所谓模板&#xff0c;实际上是建立一个通用函数或类&#xff0c; 其类内部的类型和函数的形参类型不具体指定&#xff0c; 用…

SpringBoot代理访问本地静态资源400 404

SpringBoot代理访问静态资源400 404 背景&#xff1a;pdf文件上传到linux服务器上&#xff0c;使用SpringBoot代理访问问题&#xff1a;访问过程中可能会出现400、404问题 前提&#xff1a;保证有文件&#xff0c;并且文件路径正确 SpringBoot如何配置静态资源代理&#xff0…

网络综合布线实训室建设方案

一、网络综合布线系统概述 网络综合布线系统是为了满足数据通信需求而设计和建立的一套基础设施。它提供了数据传输、信号传输和电力供应的基础结构&#xff0c;支持各种网络设备和终端设备之间的连接。 网络综合布线系统通常包括以下组成部分&#xff1a; 1&#xff09; 数据…

1.MySQL数据库的基本操作

数据库操作过程&#xff1a; 1.用户在客户端输入 SQL 2.客户端会把 SQL 通过网络发送给服务器 3.服务器执行这个 SQL,把结果返回给客户端 4.客户端收到结果,显示到界面上 数据库的操作 这里的数据库不是代表一个软件&#xff0c;而是代表一个数据集合。 显示当前的数据库 …

PHP基础

PHP&#xff08;外文名:PHP:Hypertext Preprocessor&#xff0c;中文名&#xff1a;“超文本预处理器”&#xff09;是一种免费开源的、创建动态交互性站点的强有力的服务器端脚本语言 <h1>My Name is LiSi!</h1> <script>console.log("This message is…

GuLi商城-前端基础Vue-使用Vue脚手架进行模块化开发

自己亲自实践&#xff1a; mac安装webpack webpack 简介Webpack 是一个非常流行的前端构建工具&#xff0c;它可以将多个模块&#xff08;包括CSS、JavaScript、图片等&#xff09;打包成一个或多个静态资源文件&#xff08;bundle&#xff09;&#xff0c;以便用于部署到生产…

测试人进阶技能:单元测试报告应用指南

为什么需要单元测试 从产品角度而言&#xff0c;常规的功能测试、系统测试都是站在产品局部或全局功能进行测试&#xff0c;能够很好地与用户的需要相结合&#xff0c;但是缺乏了对产品研发细节&#xff08;特别是代码细节的理解&#xff09;。 从测试人员角度而言&#xff0…

无涯教程-TensorFlow - TensorBoard可视化

TensorFlow包含一个可视化工具&#xff0c;称为TensorBoard&#xff0c;它用于分析数据流图&#xff0c;还用于了解机器学习模型。 TensorBoard的重要功能包括查看有关垂直对齐的任何图形的参数和详细信息的不同类型统计的视图。 深度神经网络包括多达36&#xff0c;000个节点…

Java实现CAS的原理

文章目录 1、 什么是CAS2、CAS的原理3、CAS的应用场景4、Java中的CAS实现5、使用AtomicInteger实现线程安全的计数器6、CAS实现原子操作的三大问题6.1、ABA问题6.2、循环时间长6.3、只能保证一个共享变量的原子性 7、总结 1、 什么是CAS CAS&#xff08;Compare and Swap&…