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

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

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

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

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 } = e
    document.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()
  ......
  其他逻辑
 }
相关推荐
tang游戏王1232 分钟前
AJAX进阶-day4
前端·javascript·ajax
无语听梧桐7 分钟前
vue3中使用Antv G6渲染树形结构并支持节点增删改
前端·vue.js·antv g6
如影随从7 分钟前
04-ArcGIS For JavaScript的可视域分析功能
开发语言·javascript·arcgis·可视域分析
web前端神器1 小时前
forever启动后端服务,自带日志如何查看与设置
前端·javascript·vue.js
才艺のblog1 小时前
127还是localhost....?
javascript·https·浏览器特性
是Yu欸1 小时前
【前端实现】在父组件中调用公共子组件:注意事项&逻辑示例 + 将后端数组数据格式转换为前端对象数组形式 + 增加和删除行
前端·vue.js·笔记·ui·vue
今天是 几 号1 小时前
WEB攻防-XSS跨站&反射型&存储型&DOM型&标签闭合&输入输出&JS代码解析
前端·javascript·xss
进击的阿三姐2 小时前
vue2项目迁移vue3与gogocode的使用
前端·javascript·vue.js
java一只鱼2 小时前
基于Spring Boot的先进时尚室内管理系统
spring boot·mysql·elementui·vue·layui
风火一回2 小时前
webpack+webpack server入门
javascript·webpack