`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

点击弹出信息框

弹出框不是地图元素,而是挂在 ol.Overlay 上的普通 DOM,位置跟着坐标走。

OpenLayers 10.3.1 · 更新 2026-10-28
`r`n
源码与运行效果
运行效果
`r`n

说明

五个站点要素配统一圆点样式,点击时用 forEachFeatureAtPixel 取命中要素,把名称与说明写进弹层,再调用 overlay.setPosition() 定位到要素坐标。positioning 设为 bottom-center,offset 留出 12 像素,箭头正好落在点位上方。关掉弹层只需把位置设为 undefined。

操作结果
点击蓝色圆点弹层出现在点位上方,显示名称与说明
点击空白处弹层收起
点击右上角 ×同样收起弹层
拖动或缩放地图弹层跟随坐标移动

要点

  • stopEvent: true 让弹层内的点击不穿透到地图。
  • 弹层内容用普通 HTML 组织,排版不受地图渲染限制。

定位后再改要素坐标时,需要重新调用 setPosition,Overlay 不会自动跟随几何。

`r`n
`r`n