問題背景
API本身的Popup和PopupTemplate等功能只支持單個目標彈窗信息展示。不能在地圖上以彈窗的形式同時展示多個目標的信息。
解決思路
想要同時顯示多個目標的彈出窗口信息,可以通過自己創建包含完整信息的DOM對象并定位到屏幕位置的方式,該屏幕像素位置由地理坐標點轉換而得。
在平移、旋轉、縮放等事件發生后,重新計算地理位置對應的當前屏幕像素位置,并定位DOM節點(通過style)。
DOM對象支持容納豐富的內容,這里以一個web-components為例。
關鍵方法
1.定義一個數據結構存放目標點及彈出窗口數據信息
2.重定位方法
3.創建彈出窗口信息方法
4.監控視圖狀態
完整代碼:
https://codepen.io/dansdocker/pen/ExrWmWg
效果: