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