使用el-amap-info-window遇到的问题

使用的这个库https://github.com/yangyanggu/vue-amap

想要滚动amapInfoWindow里的内容,但不触发地图缩放

默认滚动amapInfoWindow里的内容,会触发地图缩放。看了C站一个大佬的文章解决了。

image.png

amapInfoWindow会自动滚动到顶部

我的amapInfoWindow里面用了el-table,并且el-table里的每一行都加了勾选框。勾选后,amapInfoWindow会自动滚动到顶部。

我的解决思路是在上一个问题解决方案中的mousewheel监听中,记录弹框的scrollTop。

代码

const infoWindowRef = ref()
const infoWindowObj = ref()
const infoWindowScrollTop = ref(0)
// 信息窗口打开后 el-amap-info-window的open回调方法
function handleInfoWindowOpen(){infoWindowObj.value = infoWindowRef.value.$$getInstance()// 弹框打开后地图禁止缩放infoWindowObj.value.on('mouseover', () => mapObj.value.setStatus({ zoomEnable: false }))infoWindowObj.value.on('mouseout', () => {mapObj.value.setStatus({ zoomEnable: true })})infoWindowObj.value.on('mousewheel', (e) => {const { originEvent } = edocument.querySelector('.amap-info-content').scrollTop -= originEvent.wheelDelta / 5// 监听滚动高度infoWindowScrollTop.value = document.querySelector('.amap-info-content').scrollTop})
}// 刷新table,防止滚动条跑到最上面
function refreshTable() {setTimeout(() => {document.querySelector('.amap-info-content').scrollTop = infoWindowScrollTop.value}, 0)
}// 勾选框回调方法
function handleSelect(selection, row) {refreshTable()......其他逻辑}

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

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

相关文章

【智能制造-4】机器人控制器

机器人控制器中分哪几个模块? 机器人控制器通常由以下几个主要模块组成: 运动控制模块: 负责机器人各轴电机的位置、速度、加速度等控制 实现机器人末端执行器的精确定位和运动控制传感器接口模块: 负责机器人各种传感器信号的采集和处理 为运动控制、环境感知等提…

Python-正则表达式

目录 一、打开正则表达式 二、正则表达式的使用 1、限定符 (1)x*:*表示它前面的字符y 可以有0个或多个; (2)x:表示它前面的字符可以出现一次以上;(只可以匹配多次&…

电镀用开关电源技术详解

1 引言 在电镀行业里,一般要求工作电源的输出电压较低,而电流很大。电源的功率要求也比较高,一般都是几千瓦到几十千瓦。目前,如此大功率的电镀电源一般都采用晶闸管相控整流方式。其缺点是体积大、效率低、噪音高、功率因数低、…

[CocosCreator]CocosCreator网络通信:https + websocket + protobuf

环境 cocos creator版本:3.8.0 开发语言:ts 操作系统:windows http部分 直接使用 XMLHttpRequest 创建http请求 // _getHttpUrl 方法自己写字符串拼接public httpPostJsonRequest(uri: string, headData: any, data: any, cb: Function…

2024年6月大众点评深圳餐饮店铺POI分析18万家

2024年6月大众点评深圳餐饮店铺POI共有178720家 店铺POI点位示例: 店铺id G9TSD2JvdLtA7fdm 店铺名称 江味龙虾馆(南山店) 十分制服务评分 8.8 十分制环境评分 8.8 十分制划算评分 8.6 人均价格 128 评价数量 12840 店铺地址 南山大道与桂庙路交叉口西北角…

微信小程序 点击左上角返回弹窗提示

业务需求:当页面表单没有提交直接返回时,要提示用户是否保存当前信息,如果已经提交就不提示了。 由于微信小程序是无法监听右上角按钮返回事件。 所以就换个思路 小程序提供了如下两个Api wx.enableAlertBeforeUnload(Object object)&…

Python入门-基础知识-编程规范

1.缩进 在编程语言中,代码之间往往存在着一定的逻辑关系和层次关系。C语言和Java语言等 用“{}”分隔代码块,而Python用的是缩进和冒号。Python代码的缩进可以使用空格键或 Tab键来实现,通常情况下以4个空格或1个制表符作为1个缩进量。Pytho…

TCP协议中的三次握手和四次挥手机制

TCP协议中的三次握手和四次挥手机制 TCP(Transmission Control Protocol,传输控制协议)是一种面向连接的、可靠的、基于字节流的通信协议,它的三次握手和四次挥手机制是建立和断开连接的关键步骤。 三次握手: 第一次…

等保测评与网络安全法规的关联:构建信息安全的法律与技术双重保障

在信息化高速发展的今天,网络安全已经成为国家安全、社会稳定和经济发展的重要基石。为了保障网络空间的安全和稳定,我国制定了一系列网络安全法规,其中最为关键的就是《中华人民共和国网络安全法》。与此同时,等保测评&#xff0…

第 2 章SwiftUI 入门及文本操作

如果你之前使用过 UIKit,你会发现TextSwiftUI 中的控件与 UIKit 中的非常相似UILabel。它是一个允许你显示一行或多行文本的视图。此Text控件不可编辑,但可用于在屏幕上显示只读信息。例如,如果你想显示一条屏幕消息,你可以使用它Text来实现它。 在本章中,我们将向您展示…

RAG开发中常见的12个痛点及解决方案

受到 Barnett 等人论文《构建检索增强生成系统的七大挑战》启发,本文将探讨论文中提及的七大挑战及在开发 RAG(检索增强生成)流程中常遇到的五个额外难题。更为重要的是,我们将深入讨论解决这些 RAG 难题的策略,以便我…

使用 WebGL 创建 3D 对象

WebGL Demohttps://mdn.github.io/dom-examples/webgl-examples/tutorial/sample5/index.html 现在让我们给之前的正方形添加五个面从而可以创建一个三维的立方体。最简单的方式就是通过调用方法 gl.drawElements() 使用顶点数组列表来替换之前的通过方法gl.drawArrays() 直接…

TinTin Web3 动态精选:Aptos Builder Jam 亚洲首站即将开启,Solana 实现全网连接

TinTin 快讯由 TinTinLand 开发者技术社区打造,旨在为开发者提供最新的 Web3 新闻、市场时讯和技术更新。TinTin 快讯将以周为单位, 汇集当周内的行业热点并以快讯的形式排列成文。掌握一手的技术资讯和市场动态,将有助于 TinTinLand 社区的开…

检测SD NAND文件系统异常和修复的方法

目录 1、打开命令提示符: 2、运行chkdsk命令: 3、命令参数说明: chkdsk是Windows中的一个命令行工具,用于检查磁盘上的文件系统错误和修复坏块。MK米客方德为您提供指导,以下是使用chkdsk的步骤: 1、打开…

综合IT运维管理解决方案

综合IT运维管理解决方案 在信息化和数字化高速发展的时代,企业的IT运维管理已经成为保障业务连续性和提升运营效率的关键环节。高效的IT运维管理不仅能够降低运维成本,还能提升服务质量和用户满意度。本文将详细介绍综合IT运维管理解决方案,…

富格林:正规平台曝光出金招数

富格林悉知,在现货黄金中,正规盈利出金是要建立在无落入诱导风险的情况下实现的,投资者要关注的不仅仅是如何进行盈利,还要掌握正规平台曝光的交易技巧或经验。对于新手投资者来说,学习投资的基础知识,提升…

eBPF技术揭秘:DeepFlow如何引领故障排查,提升运维效率

DeepFlow 实战:eBPF 技术如何提升故障排查效率 目录 DeepFlow 实战:eBPF 技术如何提升故障排查效率 微服务架构系统中各个服务、组件及其相互关系的全景 零侵扰分布式追踪(Distributed Tracing)的架构和工作流程 关于零侵扰持…

华为od 2024 | 什么是华为od,od 薪资待遇,od机试题清单

目录 专栏导读华为OD机试算法题太多了,知识点繁杂,如何刷题更有效率呢? 一、逻辑分析二、数据结构1、线性表① 数组② 双指针 2、map与list3、队列4、链表5、栈6、滑动窗口7、二叉树8、并查集9、矩阵 三、算法1、基础算法① 贪心思维② 二分查…

后端系统的安全性

后端系统的安全性 后端系统的安全性是任何Web应用或服务的核心组成部分,它涉及保护数据、用户隐私以及系统免受恶意攻击。以下是后端安全的一些关键点: 认证和授权:确保只有经过身份验证的用户才能访问特定资源。这通常包括使用用户名/密码…

Spring Session将HttpSession保存到Redis中,实现重启应用会话不丢失

这篇文章介绍一下在springboot项目中整合Spring Session,将session会话信息保存到Redis中,防止重启应用导致会话丢失。 第一步 创建一个springboot项目,添加spring-session-redis的依赖,因为要用到reids,所以要把redi…