首页 / OpenLayers / 使用示例
页面滚动中的地图
地图别抢页面的滚轮,按住修饰键才缩放。
源码与运行效果
说明
地图嵌在长页面里时,滚轮缩放会抢走页面滚动。做法是把 mouseWheelZoom 从默认交互里关掉,再自己接管带修饰键的滚轮。
滚动滚轮时页面正常滚动,按住 Ctrl 或 Cmd 才缩放地图。passive: false 是 preventDefault 生效的前提。
要点
ol.interaction.defaults.defaults({mouseWheelZoom: false})是关闭滚轮缩放的开关。deltaY乘系数再改级别,缩放才平滑。- 只有按下修饰键才拦截事件,其余原样放行。
触控板双指滚动同样产生 wheel,按修饰键区分后行为一致。