使用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:表示它前面的字符可以出现一次以上;(只可以匹配多次&…

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

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

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

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

使用 WebGL 创建 3D 对象

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

检测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、基础算法① 贪心思维② 二分查…

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

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

扩散模型中的UNET

目录 一、为什么UNET模型可以用于去噪网络二、扩散模型中的UNET是一个条件去噪网络,怎么实现的三、UNET用于分割和用去去噪的区别 一、为什么UNET模型可以用于去噪网络 下采样部分: 能够提取图像的深层次特征,这些特征往往包含图像的重要结构和信息&…

原型开发:加速需求验证与设计优化

目录 前言1. 原型开发的意义1.1 定义与概述1.2 原型的类型 2. 原型开发的优势2.1 明确需求2.2 提升用户满意度2.3 降低开发风险 3. 原型开发的挑战3.1 过多的原型开发3.2 资源投入与管理3.3 期望管理 4. 优化原型开发流程4.1 明确目标与范围4.2 选择合适的工具和方法4.3 加强用…

【MySQL基础篇】概述及SQL指令:DDL及DML

数据库是一个按照数据结构来组织、存储和管理数据的仓库。以下是对数据库概念的详细解释:定义与基本概念: 数据库是长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。 数据库不仅仅是数据的简单堆积,而是遵循一定的规则…

C++之STL(十一)

1、迭代器适配器 2、插入迭代器 #include <iostream> #include <vector> #include <algorithm> #include <list> using namespace std;void showVec(const vector<int>& v) {for (vector<int>::const_iterator it v.begin(); it ! v.…

视频压缩怎么压缩最小,怎么把视频压缩的很小

压缩视频怎么压缩到很小&#xff1f;视频是我们在生活中不可或缺的一部分&#xff0c;随着制作视频的小伙伴越来越多&#xff0c;大家都想把制作好的视频上传到一些平台或传给别人&#xff0c;有时候我们会遇到视频内存过大的问题&#xff0c;今天我给大家介绍一个快速把视频压…

SQLite:一个极简使用教程

SQLite是一个轻量级的、文件系统基础的数据库&#xff0c;它被设计为配置简单、易于部署。SQLite数据库存储在一个单一的磁盘文件中&#xff0c;这意味着数据库的创建和维护都非常简单。 1. SQLite特点 轻量级&#xff1a;SQLite不需要一个独立的服务器进程。它是一个嵌入式SQ…

万物皆可爬——亮数据代理IP+Python爬虫批量下载百度图片助力AI训练

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【导航大全】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…

注意!!2024下《网络规划设计师》易混淆知识点来了,赶紧码住

宝子们&#xff0c;在复习软考网络规划设计师中&#xff0c;是不是觉得有很多知识点含义比较相近&#xff0c;很多友友刚看的时候&#xff0c;估计会像我一样把它们弄混&#xff0c;作为一个软考老鸟&#xff0c;在这里给大家整理了网规学习过程中易混淆的知识点&#xff0c;大…

Detailed Steps for Troubleshooting ORA-00600 [kdsgrp1] (文档 ID 1492150.1)

Detailed Steps for Troubleshooting ORA-00600 [kdsgrp1] (文档 ID 1492150.1)​编辑转到底部 In this Document Purpose Troubleshooting Steps References APPLIES TO: Oracle Database - Enterprise Edition Oracle Database Cloud Schema Service - Version N/A and lat…

Ngnix内存池——高并发实现高效内存管理

目录 一、高并发下传统方式的弊端 1、常用的内存操作函数 2、弊端一 3、弊端二 4、弊端三 5、弊端四 二、弊端解决之道 1、内存管理维度分析 2、内存管理组件选型 三、高并发内存管理最佳实践 1、内存池技术 2、内存池如何解决弊端 3、高并发内存池如何实现 四、…