uni-App获取地图address与高德地图API配合

news2025/7/20 22:29:44

现在使用获取地图,不需要再去安装sdk,只需要和我一样执行下方代码可以解决问题(这里会从先获取经纬度,再到经纬度转成具体的地址,最后补充定位当前位置),并且当中会提及到很多,自己开发的时候踩过的坑,谢谢

一、获取经纬度及问题

首先使用uni-App获取经纬度

uni.getLocation({
				type: 'wgs84 ',
				success(res) {
  					console.log(res.longitude)
                    console.log(res.latitude)
            }
        })

很多使用上面这串代码还是获取不到经纬度,或者是会报错,下面首先提供方案:

①遇到上述这种情况,就是你没有获取定位的权限,所以需要在app.json文件中去写入下面这代码

(在uni中设置app.json就是在箭头所示处)

 

 在下面添加这样permission的代码就可以使用了,代码我给放下面()

"permission" : {
            "scope.userLocation" : {
                "desc" : ""
            }
        }

这里有desc这个东西,主要是用来写你获取这个定位权限是用来干嘛的

②上述操作做完后,还是没有获取到经纬度的,执行

这个给他勾选上,我自己是遇到了这两种问题,有其余问题的 可以在评论区,我给解答,这样再执行获取经纬度的代码就可以获取到具体的经纬度值了

这是官网给的参数这些,需要获取其他的,自取

uni-app位置

二、将经纬度逆转码转为具体位置

这里我们需要使用高德地图的来转码,但是不用下载sdk,看操作

首先,自己去高德地图网站申请一个key,下面是如何获取key

高德地图获取key

这里有个坑,就是想着我们是开发微信小程序,所以申请的key也是小程序的,但后面就会发现暂时是调试不了的,真机调试是可以的,所以我们也需要申请一个web端的key

这里需要注意:是web服务!!不然也会报错,具体的报错码,可以去官网查看错误码是什么原因,我给放下面了,具体其他问题再去解决

官网错误码

创建完key后,下面就是怎么使用了,只需要发起一个请求就可以轻松解决

uni.request({
						url: 'https://restapi.amap.com/v3/geocode/regeo',
						method: 'GET',
						data: {
							location: res.longitude + ',' + res.latitude,
							key: '把自己的key复制过来'
						},
						success(resdata) {
							console.log(resdata.data.regeocode.formatted_address)
							})
							

这串代码需要上面的获取到的经纬度,所以在上一串代码中的success的函数中放入这个请求,就可以了

注意:

①启动失败的,去查看自己的错误码

②如果爆红了,就是你还没开启高德的定位,在manifest.json中打开后,把该勾的勾上,填写和刚刚一样的key,就可以解决获取具体的位置信息了

 

 成功拿到数据!!!

三、数据正确了,地图还没动

当现在我们能拿到当前我们位置的数据了,但是还没地图,或者有地图的,还没定位到自己的位置在哪儿的,这样就需要我们继续操作了

使用map标签就可以显示一个地图,默认给显示到北京了

下面将会把地图定位到我们当前的位置

首先给map标签一个id(id = "mymap")

如果我们想要一加载页面就自动定位到当前的位置,我们就需要将其放在monted钩子函数里面,因为还是需要我们的经纬度,所以尽量的封装好获取经纬度的方法,或者将其放在success中得到经纬度

然后执行

let map = uni.createMapContext("mymap")
map.moveToLocation(longitude, latitude)

第一行就是将我们刚刚声明的id和其绑定起来方便操作,第二行就是移动的,将经纬度传给这个方法就可以了

注意!!!

①这里在官网是明确声明了,我们需要将其参数声明show-location="true",所以光执行上述代码,还是没用声明就可以执行了,现在的map标签就成这样的

<map id="mymap" show-location="true"></map>

这样就解决了获取地图中的address和地图定位的问题,感谢大家!有问题的,欢迎评论区质问

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

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

相关文章

深度学习模型的参数、计算量和推理速度统计

在没有过拟合的情况下&#xff0c;相同模型结构下&#xff0c;一般模型的参数量和计算量与最终的性能成正比&#xff0c;在比较不同模型性能时&#xff0c;最好能保持模型参数量和计算量在相同水平下&#xff0c;因此相应参数的统计很重要。这里只进行理论计算&#xff0c;最终…

MySQL的下载与安装

1. 下载地址 官网&#xff1a;https://www.mysql.com 2. 打开官网&#xff0c;点击DOWNLOADS 然后&#xff0c;点击 MySQL Community(GPL) Downloads 3. 点击 MySQL Community Server 这里在Windows 系统下推荐下载 MSI安装程序 &#xff1b; 点击 My Go to Download Page…

中国医药院外流通市场分析

医药流通行业概览 医药流程市场主要分为院内、院外。 与院内市场终端相比&#xff0c;院外市场终端(特别是基层医疗层级终端)数量更多、规模更 小以及分布分散。此外&#xff0c;院外市场终端的服务区域半径有限&#xff0c;仅服务于一定地理区域内的 终端客户。因此&#xff…

【面试题】 ES6 类聊 JavaScript 设计模式之行为型模式(二)

本文是《ES6 类聊 JavaScript 设计模式》的第四篇&#xff0c;介绍第三种类型的设计模式行为设计模式&#xff0c;其特别关注对象之间的通信。 在软件工程中&#xff0c; 行为型模式为设计模式的一种类型&#xff0c;用来识别对象之间的常用交流模式并加以实现。如此&#xff0…

【Linux】进程控制

目录&#x1f308;前言&#x1f338;1、进程创建&#x1f361;1.1、概念&#x1f362;1.2、fork()之后执行顺序&#x1f367;1.3、fork()返回值&#x1f368;1.4、写时拷贝&#x1f369;1.5、fork创建失败问题&#x1f341;2、进程终止&#x1f372;2.1、概念&#x1f371;2.2、…

【附源码】Python计算机毕业设计数据学院工作量管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

力扣刷题day48|583两个字符串的删除操作、72编辑距离

文章目录583. 两个字符串的删除操作动态规划思路一动态规划思路二动态规划五部曲72. 编辑距离思路动态规划五部曲583. 两个字符串的删除操作 力扣题目链接 给定两个单词 word1 和 word2 &#xff0c;返回使得 word1 和 word2 相同所需的最小步数。 每步 可以删除任意一个字符…

K_A05_001 基于 STM32等单片机驱动8X8点阵模块(MAX7219)显示0-9

目录 一、资源说明 二、基本参数 1、参数 2、引脚说明 三、通信协议说明 工作时序 对应程序: 四、部分代码说明 1、接线说明 1.1、STC89C52RC8X8点阵模块&#xff08;MAX7219&#xff09; 1.2、STM32F103C8T68X8点阵模块&#xff08;MAX7219&#xff09; 2、亮度调节 五、基…

Python中内置数据库!SQLite使用指南!

&#x1f4a1; 作者&#xff1a;韩信子ShowMeAI &#x1f4d8; Python3◉技能提升系列&#xff1a;https://www.showmeai.tech/tutorials/56 &#x1f4d8; 本文地址&#xff1a;https://www.showmeai.tech/article-detail/390 &#x1f4e2; 声明&#xff1a;版权所有&#xf…

Docker数据卷

Docker数据卷、Docker安全Docker数据卷Docker数据卷管理bind mountdocker数据卷两种方式不同和相同卷插件简介convoy卷插件实践Docker数据卷 主要解决存储问题、容器数据滞留 Docker数据卷管理 bind mount “-v”宿主机路径容器内nginx发布目录 新建一个首页 现在容器内目录…

猿创征文|工具百宝箱-编辑器-笔记工具-日常小工具-原型设计工具

这篇文主要介绍了开发者工具之外的一些日常小工具&#xff0c;我用这些小工具主要完成什么工作。分享给大家 官方活动入口&#xff1a;「猿创征文 」第四季 | 2022 年我的开发者工具 猿创征文&#xff5c;工具百宝箱-代码编辑器-版本控制工具-终端神器-项目与事务跟踪工具-SFTP…

pdf文件转txt怎么转?这几个方法你值得收藏

平时我们在网络上搜索资料的时候&#xff0c;会发现很多资料都是以PDF格式显示的&#xff0c;虽然这种文件格式很方便我们查看&#xff0c;但是如果将其保存到手机中&#xff0c;又太占用内存了。其实我们可以将其转换成txt格式&#xff0c;因为我发现它不仅不占空间&#xff0…

助力数据中心双碳发展,存储如何变得越来越绿?

2022年11月10日&#xff0c;我看到曙光发了首款液冷存储&#xff0c;目标锁定数据中心PUE1.1以下。在“双碳”发展趋势下&#xff0c;聚焦液冷存储与液冷服务器的创新&#xff0c;曙光对绿色数据中心的可持续发展将带来行业引领效应。 双碳大趋势下&#xff0c;绿色存储呼之欲出…

计算机网络复习

考试重点 要掌握OSI七层模型&#xff0c; 会根据数据画模拟和数字信号的图&#xff0c;尤其是TCP和UDP所提供的服务&#xff0c; 掌握TCP连接建立和释放的完整过程&#xff0c; 掌握滑动窗口的概念&#xff0c; 还要了解端到端的含义&#xff0c; 了解ARP、ICMP、CIDR等协议的…

干了3年软件测试,2022年我离职了...

今天在网上刷到一个帖子&#xff0c;说软件测试岗&#xff0c;在公司呆了三年&#xff0c;由于疫情原因&#xff0c;公司效益不是很好&#xff0c;加上自己的技术一直停留在功能测试&#xff0c;在公司可有可无&#xff0c;被公司裁后找不到工作… 逛百度贴吧、逛技术论坛&…

[附源码]java毕业设计基于servlet技术实现游戏娱乐平台

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

FFplay文档解读-48-多媒体过滤器二

32.8 ebur128 EBU R128扫描仪滤光片。此过滤器将音频流作为输入并以不变的方式输出。默认情况下&#xff0c;它以10Hz的频率记录消息&#xff0c;具有瞬时响度&#xff08;由M标识&#xff09;&#xff0c;短期响度&#xff08;S&#xff09;&#xff0c;集成响度&#xff08;…

简单工厂,工厂方法,抽象工厂模式

软件设计七大原则 一、简单工厂&#xff08;静态工厂方法&#xff09; 它存在的目的很简单&#xff1a;定义一个创建对象的接口。组成&#xff1a; 工厂类角色&#xff1a;这是本模式的核心&#xff0c;含有一定的商业逻辑和判断逻 辑。在java中它往往由一个具体类实现。 抽…

南非醉茄来源的天然产物之活性大盘点

图 1. 南非醉茄 (Withania Somnifera) 的多种药理活性[2] 化学成分 到目前为止&#xff0c;大约有超过 12 种生物碱和 40 多种甾体内脂类化合物从南非醉茄中被分离出来 。其中&#xff0c;醉茄内脂 (Withanolides) 因其广泛的药理活性 (抗肿瘤、抗菌、抗炎和免疫调节活性等) 受…

RabbitMQ系列【9】过期时间

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 文章目录概念队列过期控制台代码消息过期删除策略概念 TTL全称Time To Live&#xff0c;是指存活时间或过期时间。当消息到达存活时间后&#xff0c;还没有被消费&#xff0c;会被自动清除。 RabbitMQ…