使用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()
  ......
  其他逻辑
 }
相关推荐
百思可瑞教育1 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
不想吃饭e2 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
Enddme2 小时前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试
力Mer2 小时前
全排列-遇到的深浅拷贝问题
javascript
德育处主任2 小时前
p5.js 绘制 3D 椭球体 ellipsoid
前端·javascript·数据可视化
安卓开发者2 小时前
鸿蒙NEXT Web组件与JavaScript交互:打通原生与前端的桥梁
前端·javascript·harmonyos
fdc20173 小时前
Avalonia 基础导航实现:从页面切换到响应式交互全指南
开发语言·javascript·ecmascript
小菜花293 小时前
利用H5实现svg图片中各部分监听事件
前端·javascript·svg·object标签
前端小巷子4 小时前
JS 打造「放大镜 + 缩略图」一体组件
前端·javascript·面试
知识分享小能手5 小时前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3