使用的這個庫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 } = 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()......其他邏輯}