经纬志
首页 / OpenLayers / 使用示例

悬停信息框

鼠标划过色块时,一块跟随指针的提示框显示区域名称,移出后自动隐藏。

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

说明

提示框是页面里的普通 div,用绝对定位覆盖在地图容器上。pointermove 事件里调用 map.forEachFeatureAtPixel() 查询命中的要素,命中后把提示框的 left、top 设为当前像素坐标;拖动地图时清空状态,避免提示框乱飘。

操作结果
鼠标移入色块提示框跟随指针显示区域名称
移动到空白处提示框隐藏
拖动地图提示框立即隐藏,松开后重新响应

提示框加 pointer-events: none,否则它盖在地图上会抢走 pointermove,造成提示框闪烁。