uniapp地图点击获取位置

主页面

<view class="right-content" @click.stop="kilometer(item)">
	<view class="km">
     {{item.distance||'0'}}km
	</view>
	<image src="../../static/map.png" mode=""
		style="width: 32rpx; height: 32rpx; margin-left: 10rpx; margin-right: 10px;">
	</image>
</view>
   kilometer(item){
		uni.navigateTo({
			url: `/subpkg/map/map?item=${(JSON.stringify(item))}`,
		})
	},

点击跳转的页面

<template>
	<view>
		<map style="width: 100%; height: 400px;" enable-building="true" show-compass="true" :latitude="latitude"
			:longitude="longitude" :markers="markers">
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				latitude: 0,
				longitude: 0,
				markers: [{
					id: 1,
					latitude: 0,
					longitude: 0,
					width: '30', // 标记点图标宽度
					height: '50' // 标记点图标高度
				}],
				msgInfo: {}
			}

		},
		onLoad(option) {
			this.msgInfo = JSON.parse(option.item || '{}');
			this.latitude = Number(this.msgInfo.lat || 0);
			this.longitude = Number(this.msgInfo.lng || 0);

			// 更新 covers 数组中的标记点位置  
			this.markers[0].latitude = this.latitude;
			this.markers[0].longitude = this.longitude;


		}
	}
</script>

<style lang="scss">

</style>

在这里插入图片描述

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

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

相关文章

Linux-笔记 OverlayFS文件系统入门

目录 前言 主要概念 工作原理 特点特性 1、上下合并 2、同名文件覆盖 3、同名目录合并 4、写时拷贝 实操入门 内核配置 挂载文件系统 验证 1、同名文件覆盖 2、同名目录合并 3、写时拷贝 1&#xff09;验证新增文件或目录 2&#xff09;验证修改文件 3&…

2024最新谷歌镜像网站入口分享

google谷歌搜索引擎最新可用镜像站列表&#xff1a;&#xff08;注意不要登录账号&#xff0c;镜像站并非谷歌官方网站&#xff09; 谷歌镜像网站1&#xff1a;https://google.cloudnative.love/ 谷歌镜像网站2&#xff1a;https://gsearch.g.shellten.top/ 谷歌镜像网站3&…

【论文阅读】--Popup-Plots: Warping Temporal Data Visualization

弹出图&#xff1a;扭曲时态数据可视化 摘要1 引言2 相关工作3 弹出图3.1 椭球模型3.1.1 水平轨迹3.1.2 垂直轨迹3.1.3 组合轨迹 3.2 视觉映射与交互 4 实施5 结果6 评估7 讨论8 结论和未来工作致谢参考文献 期刊: IEEE Trans. Vis. Comput. Graph.&#xff08;发表日期: 2019&…

螺丝扭断力试验机SJ-12

一、设备简介&#xff1a; 螺丝扭断力试验机用于测试螺丝的耐扭断力。本机将螺丝产品所受到轴向扭转力与反作用力&#xff0c;常用扭力扳手来计量。本机可对产品进行转力测、锁动测试、锁动扭力测试等多种测试方式。 二、设备使用&#xff1a; 1、将螺丝强度扭力试验机底座锁于…

天润融通:AI赋能客户体验,推动企业收入和业绩增长

“客户体验已经成为全球企业差异化的关键。人工智能与数据分析等创新技术正在加速推动企业在客户体验计划中取得成功&#xff0c;以保持领先地位”。Customer Insights & Analysis 研究经理Craig Simpson说道。 客户体验 (CX&#xff0c;Customer Experience) 是客户在与企…

STM32CubeMX与RT-Thread Studio协助使用(实现点亮LED)

1创建自己的项目 1-1选择板子 1-2生成的项目 运行一下看是否创建成功 零警告零错误 2配置STM32Cude 2-1找打如图图标点击&#xff08;CubeMX的图标&#xff09; 2-2输入自己安装的路径选中exe文件 点击Browse 找到如图选中&#xff0c;在打开&#xff08;STM32CubeMX的安装路…

变长的时间戳设计,第2版

以前的时间戳有32位&#xff0c;以秒为单位&#xff0c;231秒≈68年&#xff0c;从1970年开始&#xff0c;到2038年会出问题。 现在的时间戳有64位&#xff0c;表达范围仍然受限。 设计变长的时间戳&#xff0c;以32位为单元&#xff0c;最短有32位&#xff0c;最长有328256位…

如何使用代理 IP 防止多个 Facebook 帐户关联 - 最佳实践

在社交媒体被广泛应用的今天&#xff0c;Facebook作为全球最大的社交网络平台之一&#xff0c;面临着很多挑战&#xff0c;其中之一就是用户行为的管理和安全。 为了防止多个账户之间的关联和滥用&#xff0c;Facebook需要采取一系列措施&#xff0c;其中包括使用静态住宅代理…

【Redis】数据持久化

https://www.bilibili.com/video/BV1cr4y1671t?p96 https://blog.csdn.net/weixin_54232666/article/details/128821360 单点redis问题&#xff1a; 数据丢失问题&#xff1a;实现Redis数据持久化并发能力问题&#xff1a;搭建主从集群&#xff0c;实现读写分离故障恢复问题&…

探索顺序结构:栈的实现方式

&#x1f511;&#x1f511;博客主页&#xff1a;阿客不是客 &#x1f353;&#x1f353;系列专栏&#xff1a;渐入佳境之数据结构与算法 欢迎来到泊舟小课堂 &#x1f618;博客制作不易欢迎各位&#x1f44d;点赞⭐收藏➕关注 ​​ 一、栈的定义 栈&#xff08;Stack&#xf…

鸿蒙开发系统基础能力:【@ohos.screenLock (锁屏管理)】

锁屏管理 锁屏管理服务是OpenHarmony中系统服务&#xff0c;为锁屏应用提供注册亮屏、灭屏、开启屏幕、结束休眠、退出动画、请求解锁结果监听&#xff0c;并提供回调结果给锁屏应用。锁屏管理服务向三方应用提供请求解锁、查询锁屏状态、查询是否设置锁屏密码的能力。 说明&a…

thinksboard新建菜单

1.打开目录\thingsboard\ui-ngx\src\app\modules\home\pages新增npages文件夹 2.新增npages.module.ts以及npages-routing.module.ts控制文件&#xff0c;以及页面展示文件npages.component.html,npages.component.scss,npages.component.ts 3.打开npages.component.ts文件&…

RT-Thread 实时系统介绍

介绍 RT-Thread 是一款开源的实时操作系统&#xff0c;主要面向物联网设备。它支持多种芯片架构&#xff0c;具有安全、低功耗、智能、可伸缩的特性。RT-Thread 拥有超过16年的技术积累&#xff0c;广泛应用于各行业&#xff0c;装机量达数十亿台。它提供了包括设备虚拟文件系…

VMware Windows sever 虚拟机互联网连接配置

一、VMware配置 1、虚拟网络编辑 从左上角 编辑→虚拟网络编辑器 进入 2、配置NAT模式 配置的子网IP&#xff0c;在虚拟机中获取到的ip跟子网IP的前三个是一样的 1.配置网关 2.配置DHCP设置 这个主要是分配ip最后一位获取的区间 3、虚拟机配置 二、Windows Server 虚拟机配置…

多接口分线盒在工业自动化中的重要性与应用

简介 多接口分线盒是现代工业自动化中不可或缺的一个组成部分&#xff0c;它主要用于简化复杂的接线系统&#xff0c;提高效率和可靠性。本文将详细探讨多接口分线盒的定义、功能、以及在工业自动化中的应用情况。 无源多接口分线盒 多接口分线盒的定义与功能 多接口分线盒是…

基于Pytorch框架构建VGG-19模型

Pytorch 一、训练模型1.导入资源包2.定义数据预处理3.读取数据 二、定义VGG19模型1.定义自定义的 VGG19 模型运行结果&#xff1a; 四、验证模型1. 定义验证过程2.用于训练模型并应用学习率调整策略的循环运行结果&#xff1a;3.保存模型的状态字典 三、训练模型1. 定义训练函数…

MySQL—存储过程(详细介绍与基本语法)

目录 一、存储过程——介绍 &#xff08;1&#xff09;基本介绍 &#xff08;2&#xff09;基本特点 二、存储过程——语法 &#xff08;1&#xff09;基本语法 创建 调用 &#xff08;2&#xff09;实操&#xff08;创建和调用&#xff09; 1、创建一个叫 "p1&qu…

2024年6月26日 (周三) 叶子游戏新闻

老板键工具来唤去: 它可以为常用程序自定义快捷键&#xff0c;实现一键唤起、一键隐藏的 Windows 工具&#xff0c;并且支持窗口动态绑定快捷键&#xff08;无需设置自动实现&#xff09;。 土豆录屏: 免费、无录制时长限制、无水印的录屏软件 《Granblue Fantasy Versus: Risi…

K210视觉识别模块学习笔记6: 识别苹果_图形化操作函数_

今日开始学习K210视觉识别模块: 图形化操作函数 亚博智能 K210视觉识别模块...... 固件库: canmv_yahboom_v2.1.1.bin 训练网站: 嘉楠开发者社区 今日学习如何在识别到目标的时候添加图形化操作:(获取坐标、框出目标等) 在识别苹果的基础上 学习与添加 这些操…

在前端开发过程中如果函数参数很多,该如何精简

1. 在前端开发过程中如果函数参数很多&#xff0c;该如何精简 1.1. 对象参数&#xff08;对象字面量&#xff09;&#xff1a;1.2. 默认参数和解构赋值&#xff1a;1.3. 使用类或构造函数&#xff1a;1.4. 利用闭包或者高阶函数&#xff1a;1.5. 利用ES6的扩展运算符&#xff1…