首页 / OpenLayers / 使用示例
`r`n 点击弹出信息框
弹出框不是地图元素,而是挂在 ol.Overlay 上的普通 DOM,位置跟着坐标走。
源码与运行效果
说明
五个站点要素配统一圆点样式,点击时用 forEachFeatureAtPixel 取命中要素,把名称与说明写进弹层,再调用 overlay.setPosition() 定位到要素坐标。positioning 设为 bottom-center,offset 留出 12 像素,箭头正好落在点位上方。关掉弹层只需把位置设为 undefined。
| 操作 | 结果 |
|---|---|
| 点击蓝色圆点 | 弹层出现在点位上方,显示名称与说明 |
| 点击空白处 | 弹层收起 |
| 点击右上角 × | 同样收起弹层 |
| 拖动或缩放地图 | 弹层跟随坐标移动 |
要点
stopEvent: true让弹层内的点击不穿透到地图。- 弹层内容用普通 HTML 组织,排版不受地图渲染限制。
定位后再改要素坐标时,需要重新调用 setPosition,Overlay 不会自动跟随几何。