使用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.pswp.cn/diannao/36917.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/36917.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/36917.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【智能制造-4】機器人控制器

機器人控制器中分哪幾個模塊? 機器人控制器通常由以下幾個主要模塊組成: 運動控制模塊: 負責機器人各軸電機的位置、速度、加速度等控制 實現機器人末端執行器的精確定位和運動控制傳感器接口模塊: 負責機器人各種傳感器信號的采集和處理 為運動控制、環境感知等提…

Python-正則表達式

目錄 一、打開正則表達式 二、正則表達式的使用 1、限定符 (1)x*:*表示它前面的字符y 可以有0個或多個; (2)x:表示它前面的字符可以出現一次以上;(只可以匹配多次&…

電鍍用開關電源技術詳解

1 引言 在電鍍行業里,一般要求工作電源的輸出電壓較低,而電流很大。電源的功率要求也比較高,一般都是幾千瓦到幾十千瓦。目前,如此大功率的電鍍電源一般都采用晶閘管相控整流方式。其缺點是體積大、效率低、噪音高、功率因數低、…

[CocosCreator]CocosCreator網絡通信:https + websocket + protobuf

環境 cocos creator版本:3.8.0 開發語言:ts 操作系統:windows http部分 直接使用 XMLHttpRequest 創建http請求 // _getHttpUrl 方法自己寫字符串拼接public httpPostJsonRequest(uri: string, headData: any, data: any, cb: Function…

2024年6月大眾點評深圳餐飲店鋪POI分析18萬家

2024年6月大眾點評深圳餐飲店鋪POI共有178720家 店鋪POI點位示例: 店鋪id G9TSD2JvdLtA7fdm 店鋪名稱 江味龍蝦館(南山店) 十分制服務評分 8.8 十分制環境評分 8.8 十分制劃算評分 8.6 人均價格 128 評價數量 12840 店鋪地址 南山大道與桂廟路交叉口西北角…

微信小程序 點擊左上角返回彈窗提示

業務需求:當頁面表單沒有提交直接返回時,要提示用戶是否保存當前信息,如果已經提交就不提示了。 由于微信小程序是無法監聽右上角按鈕返回事件。 所以就換個思路 小程序提供了如下兩個Api wx.enableAlertBeforeUnload(Object object)&…

Python入門-基礎知識-編程規范

1.縮進 在編程語言中,代碼之間往往存在著一定的邏輯關系和層次關系。C語言和Java語言等 用“{}”分隔代碼塊,而Python用的是縮進和冒號。Python代碼的縮進可以使用空格鍵或 Tab鍵來實現,通常情況下以4個空格或1個制表符作為1個縮進量。Pytho…

TCP協議中的三次握手和四次揮手機制

TCP協議中的三次握手和四次揮手機制 TCP(Transmission Control Protocol,傳輸控制協議)是一種面向連接的、可靠的、基于字節流的通信協議,它的三次握手和四次揮手機制是建立和斷開連接的關鍵步驟。 三次握手: 第一次…

等保測評與網絡安全法規的關聯:構建信息安全的法律與技術雙重保障

在信息化高速發展的今天,網絡安全已經成為國家安全、社會穩定和經濟發展的重要基石。為了保障網絡空間的安全和穩定,我國制定了一系列網絡安全法規,其中最為關鍵的就是《中華人民共和國網絡安全法》。與此同時,等保測評&#xff0…

第 2 章SwiftUI 入門及文本操作

如果你之前使用過 UIKit,你會發現TextSwiftUI 中的控件與 UIKit 中的非常相似UILabel。它是一個允許你顯示一行或多行文本的視圖。此Text控件不可編輯,但可用于在屏幕上顯示只讀信息。例如,如果你想顯示一條屏幕消息,你可以使用它Text來實現它。 在本章中,我們將向您展示…

RAG開發中常見的12個痛點及解決方案

受到 Barnett 等人論文《構建檢索增強生成系統的七大挑戰》啟發,本文將探討論文中提及的七大挑戰及在開發 RAG(檢索增強生成)流程中常遇到的五個額外難題。更為重要的是,我們將深入討論解決這些 RAG 難題的策略,以便我…

使用 WebGL 創建 3D 對象

WebGL Demohttps://mdn.github.io/dom-examples/webgl-examples/tutorial/sample5/index.html 現在讓我們給之前的正方形添加五個面從而可以創建一個三維的立方體。最簡單的方式就是通過調用方法 gl.drawElements() 使用頂點數組列表來替換之前的通過方法gl.drawArrays() 直接…

TinTin Web3 動態精選:Aptos Builder Jam 亞洲首站即將開啟,Solana 實現全網連接

TinTin 快訊由 TinTinLand 開發者技術社區打造,旨在為開發者提供最新的 Web3 新聞、市場時訊和技術更新。TinTin 快訊將以周為單位, 匯集當周內的行業熱點并以快訊的形式排列成文。掌握一手的技術資訊和市場動態,將有助于 TinTinLand 社區的開…

檢測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、基礎算法① 貪心思維② 二分查…

后端系統的安全性

后端系統的安全性 后端系統的安全性是任何Web應用或服務的核心組成部分,它涉及保護數據、用戶隱私以及系統免受惡意攻擊。以下是后端安全的一些關鍵點: 認證和授權:確保只有經過身份驗證的用戶才能訪問特定資源。這通常包括使用用戶名/密碼…

Spring Session將HttpSession保存到Redis中,實現重啟應用會話不丟失

這篇文章介紹一下在springboot項目中整合Spring Session,將session會話信息保存到Redis中,防止重啟應用導致會話丟失。 第一步 創建一個springboot項目,添加spring-session-redis的依賴,因為要用到reids,所以要把redi…