首页 / OpenLayers / 使用示例
悬停信息框
鼠标划过色块时,一块跟随指针的提示框显示区域名称,移出后自动隐藏。
源码与运行效果
说明
提示框是页面里的普通 div,用绝对定位覆盖在地图容器上。pointermove 事件里调用 map.forEachFeatureAtPixel() 查询命中的要素,命中后把提示框的 left、top 设为当前像素坐标;拖动地图时清空状态,避免提示框乱飘。
| 操作 | 结果 |
|---|---|
| 鼠标移入色块 | 提示框跟随指针显示区域名称 |
| 移动到空白处 | 提示框隐藏 |
| 拖动地图 | 提示框立即隐藏,松开后重新响应 |
提示框加 pointer-events: none,否则它盖在地图上会抢走 pointermove,造成提示框闪烁。