问题背景
API本身的Popup和PopupTemplate等功能只支持单个目标弹窗信息展示。不能在地图上以弹窗的形式同时展示多个目标的信息。
解决思路
想要同时显示多个目标的弹出窗口信息,可以通过自己创建包含完整信息的DOM对象并定位到屏幕位置的方式,该屏幕像素位置由地理坐标点转换而得。
在平移、旋转、缩放等事件发生后,重新计算地理位置对应的当前屏幕像素位置,并定位DOM节点(通过style)。
DOM对象支持容纳丰富的内容,这里以一个web-components为例。
关键方法
1.定义一个数据结构存放目标点及弹出窗口数据信息
2.重定位方法
3.创建弹出窗口信息方法
4.监控视图状态
完整代码:
https://codepen.io/dansdocker/pen/ExrWmWg
效果:
网友评论