Vite + Vue3 + OpenLayers 手动激活地图
一、需求说明
开发中遇到一种需求:
需要展示地图,但默认不影响页面滚动。
点击地图后,在地图上方滚动鼠标滚轮可以缩放地图。
点击地图之外的地方,鼠标再回到地图上滚动滚轮时,页面可以上下滚动,但地图不会缩放。
二、开发环境
Vite + Vue3 + ol6
复制代码
使用 Vite
初始化项目并安装 ol
,更详细做法可以查看 『Vite + Vue3 + OpenLayers 起步』
三、编码
复制代码
上面的代码最主要的部分是 地图容器(HTML)
部分添加了一个 tabindex
属性,有了该属性,鼠标放到地图容器上默认也是不会被选中的,所以滚动的时候就是触发页面滚动,不会操作到地图。
这其实是 HTML
原生的属性,这个属性指定 tab
键控制次序。W3C
上面说 Safari
不支持该属性,但据我实际测试是支持的!
四、推荐
如果不清楚 OpenLayers
是什么,可以阅读: 『Vite + Vue3 + OpenLayers 起步』
版权声明: 本文为 InfoQ 作者【学习委员】的原创文章。
原文链接:【http://xie.infoq.cn/article/3b93f9cda6c9a6b0efefd6e8b】。文章转载请联系作者。
评论