uniapp 展示地图,并获取当前位置信息(精确位置)

使用uniapp 提供的map标签 

	  <map :key='mapIndex'  class="container" :latitude="latitude" :longitude="longitude"  ></map>

页面初始化的时候,获取当前的位置信息

		created() {
			
	
				
			let that = this
			uni.getLocation({
				type: 'gcj02',// 火星坐标系
				isHighAccuracy:true,
				geocode:true,
				success: function (res) {
					that.latitude = res.latitude
					that.longitude  = res.longitude
					// 通过经纬度获取位置信息
					that.locationName(res.latitude, res.longitude)
				},fail:function(res){
					console.log()
						uni.showToast({
							title: '获取位置信息失败',
							duration: 2000,
							icon:'error'
						});
				}
			});
			

		},

根据获取到的经纬度 获取 位置信息(此处使用的是 高德地图的位置服务,通过高德地图的逆地理位置解析,获取定位到的经纬度的 位置信息)

			// 定义解析位置信息的方法
			locationName(latitude, longitude) {
				let that = this
				let mapKey = '1d8xxxxxxxxxxxxxxxx'; 
				
				// 构造URL
				var url = 'https://restapi.amap.com/v3/geocode/regeo?key=' + mapKey + '&location=' + longitude + ',' + latitude;
				 
				// 使用fetch发送请求
				fetch(url)
				  .then(response =>  response.json())
				  .then(data => {
				    if (data.status === '1') {
				      // 获取到的地址信息
				      var address = data.regeocode.formatted_address;
					  that.nowAddressInfo = address
					  
				    } else {
				      console.error('Error: ' + data.info);
				    }
				  })
				  .catch(error => console.error('Error:', error));
			},

高德地图获取key

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

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

相关文章

pepy - Python 包下载量统计工具站

文章目录 一、关于 pepy站点使用显示下载量 二、代码贡献依赖环境配置启动环境 三、架构和模式四、常问问题 一、关于 pepy 官网&#xff1a;https://www.pepy.techgithub : https://github.com/psincraian/pepy 前端&#xff1a;https://github.com/psincraian/pepy-front 站…

Linux文本三剑客 awk 和 grep

awk 前言 AWK是一种优良的文本处理工具。它不仅是 Linux中也是任何环境中现有的功能最强大的数据处理引擎之一。 Linux中最常用的文本处理工具有grep&#xff0c;sed&#xff0c;awk。行内将之称为文本三剑客&#xff0c;就功能量和效率来看&#xff0c;awk是当之无愧的文本三…

智能盒子如何检测进气压力传感器?

进气压力传感器是一种用于测量发动机进气系统中压力的传感器。安装在发动机的进气管路或进气歧管上&#xff0c;用于监测进气压力的变化。进气压力传感器的作用是将测量到的压力信号转换为电信号&#xff0c;以便发动机控制单元(ECU)可以根据压力变化来调整燃油喷射量、点火时机…

git版本控制流程

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…

开启数字化校园时代:智慧教育的引领者

在当前数字化时代&#xff0c;智慧教育已经成为引领未来的热门议题。随着科技的不断进步和教育观念的演进&#xff0c;数字化校园正逐渐变为现实。作为教育界的领导者&#xff0c;我们积极践行智慧教育理念&#xff0c;为学生们营造一个更智能、高效的学习环境。 教育是每个国家…

零售业上云为什么首选谷歌云

零售业是国民经济的重要组成部分&#xff0c;在促进经济发展、改善人民生活水平方面发挥着重要作用。零售业也是一个竞争激烈的行业&#xff0c;零售企业需要不断创新经营方式、提高服务质量才能在竞争中立于不败之地。 近年来&#xff0c;中国企业在品牌出海方面&#xff0c;一…

常见电子元件封装

常用电子元件封装 本文摘要 本文主要讲述元件封装&#xff0c;我们想要用元件&#xff0c;当然要考虑到他的形状尺寸了&#xff0c;如果太大与结构冲突用不了&#xff0c;太小功率不满足使用在电路中而无法使用&#xff0c;每种元件也因为不同封装可以承受电压等级&#xff0c;…

实现数字化教育梦想:数字化校园解决方案的奇妙魅力

数字化校园解决方案正在以惊人的速度改变着传统教育的面貌&#xff0c;为教育事业注入了新的生机与活力。在这个数字时代&#xff0c;学校和教育机构面临着前所未有的挑战&#xff0c;而数字化校园解决方案则成为了应对这些挑战的利器。它集成了先进的技术和创新的教育理念&…

时间处理获取交易日(考虑兼容性问题)

在获取交易日时间的处理上&#xff0c;出现了苹果14不兼容的问题&#xff0c;就这个问题记录下。 一、获取交易日的代码 封装了一个js文件&#xff0c;在untils目录下&#xff0c;先看代码&#xff0c;然后我讲下思路。 // 获取节假日数据 import { getCalendarHolidays } …

# 常用刀具钢材介绍

常用刀具钢材介绍 文章目录 常用刀具钢材介绍1、M390 钢材详细介绍1.1、关键特性1.2、应用 2、 VG10 钢材详细介绍2.1、关键特性2.2、应用 3、N690 钢材详细介绍3.1、关键特性3.2、应用 4、D2, D53, 和 7Cr13MoV 钢材对比4.1、D2 钢材4.2、D53 钢材4.3、7Cr13MoV 钢材4.4、对比…

奇怪的bug

奇怪的bug 合集 1.不可见字符集问题 起因是在自己做小项目的时候&#xff0c;通过lombok的data注解&#xff0c;默认生成实体类的get set方法 但是在某个方法中获取一个属性值的时候显示找不到该属性值的get方法&#xff0c;具体直接贴图 我以为是lombok的配置问题&#xff0c…

opencv--使用opencv实现旋转角度的模板匹配

下面的例子是简单的使用opencv 实现的模板匹配流程&#xff0c;其中时间性能和精确度还需要调整&#xff0c;如果直接使用会出问题&#xff0c;所以这个只是例子&#xff0c;根据代码原理可以实现尺度变化的模板匹配和旋转尺度变化同时&#xff0c;具体根据实现的旋转代码进一步…

手持式凝血分析仪条码二维码高效读取解决方案

在医疗行业中&#xff0c;凝血分析仪是一种关键设备&#xff0c;主要用于快速、准确地检测血液凝固功能&#xff0c;同时不需要复杂的样品制备&#xff0c;并且可以在几分钟内获得患者的凝血功能信息&#xff0c;对疾病的诊断和治疗具有重要意义。医疗技术和科技的飞速发展&…

三篇卫星切换的论文

目录 一、Energy-Aware Satellite Handover based on Deep Reinforcement Learning 1、题目翻译 2、来源 3、内容 二、A Reliable Handover Strategy with Second Satellite Selection in LEO Satellite Networks 1、题目翻译 2、来源 3、内容 三、User Grouping-Based…

揭秘:义乌理阳的跨境选品师项目

在全球经济一体化的今天&#xff0c;跨境电商已成为各国贸易的重要组成部分&#xff0c;而选品师作为其中的关键角色&#xff0c;扮演着挑选优质商品的重要角色。在中国义乌&#xff0c;一家名为理阳信息咨询服务有限公司备受关注&#xff0c;因其据称拥有跨境选品师项目而备受…

Qt-Advanced-Docking-System的学习

Qt5.12实现Visual Studio 2019 拖拽式Dock面板-Qt-Advanced-Docking-System_c_saide6000-GitCode 开源社区 (csdn.net) 我使用的是Qt5.5.0 开始&#xff0c;我下载的是最新版的源码&#xff1a;4.1版本 但是&#xff0c;打开ads.pro工程文件&#xff0c;无法编译成功。 然后…

从深度嵌套的JSON结构中提取值

问题背景 在某些情况下&#xff0c;我们可能需要从深度嵌套的JSON结构中提取值。例如&#xff0c;给定以下JSON结构&#xff1a; {"foo_code": 404,"foo_rbody": {"query": {"info": {"acme_no": "444444","…

【云原生】Kubernetes----Helm包管理器

目录 引言 一、Helm概述 1.Helm价值概述 2.Helm的基本概念 3.Helm名词介绍 二、安装Helm 1.下载二进制包 2.部署Helm环境 3.添加补全信息 三、使用Helm部署服务 1.创建chart 2.查看文件信息 3.安装chart 4.卸载chart 5.自定义chart服务部署 6.版本升级 7.版本…

如何舒适的使用VScode

安装好VScode后通常会很不好用&#xff0c;以下配置可以让你的VScode变得好用许多。 VScode的配置流程 1、设置VScode中文2、下载C/C拓展&#xff0c;使代码可以跳转3、更改编码格式4、设置滚轮缩放5、设置字体6、设置保存自动改变格式7、vscode设置快捷代码 1、设置VScode中文…

UE4/UE5像素流送云推流|程序不稳定、弱网画面糊怎么办?

看到不少反馈说像素流送技术在实际的应用中&#xff0c;存在一些问题&#xff0c;比如程序崩溃、画面模糊等。本文将探讨这些问题&#xff0c;并介绍点量云流软件提供了哪些有效的解决方案。 常见的像素流送技术问题 画面质量问题&#xff1a; 当快速操作UE模型或初次启动像素…