使用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()
  ......
  其他逻辑
 }
相关推荐
易筋紫容13 小时前
创建型模式:对象的诞生艺术
开发语言·前端·javascript
0_Error_15 小时前
猫国建设者 修改资源 自动采集
javascript
贩卖黄昏的熊15 小时前
NestJS简明教程——异常处理和日志
javascript·node.js·nest.js
黄泉路醉s17 小时前
在Vant+Vue+TypeScript的H移动前端使用UnoCSS
前端·vue.js·typescript
海带紫菜菠萝汤18 小时前
FFmpeg.wasm 实践:在浏览器中运行 FFmpeg 的能力边界与性能瓶颈
前端·javascript·ffmpeg·音视频·wasm
名字还没想好☜19 小时前
React 受控输入框光标跳到末尾:格式化输入时的 selection 丢失 bug 与修复
前端·javascript·react.js·bug·react·next.js
upgrador19 小时前
桌面应用开发:Electron 与 NSIS 的关系、打包流程及 Windows 本地构建实战
javascript·windows·electron
我要两颗404西柚19 小时前
Stage three:VUE工程化与实战工具
前端·javascript·vue.js
写不来代码的草莓熊20 小时前
Cesium 地图交互绘制圆形、多边形
前端·javascript·地图
JackSparrow41421 小时前
前端安全之JS混淆+请求加密+请求签名以提升爬虫难度
前端·javascript·后端·爬虫·python·安全