html - 为谷歌地图提供叠加图像，同时保持 map 可移动

Question

您好，我在我的网站上使用谷歌地图。我想在保持 map 可移动的同时使用图像为其覆盖(用户可以四处拖动和缩放)

到目前为止我做了什么:

我创建了 map ，然后我使用伪 :before 元素来调用我想作为叠加层的图像。

我将这个伪元素叠加层设置为填充整个 map ，并使用 z-index 将其放置在顶部。

看起来不错，但是由于伪元素覆盖在 map 之上， map 的控件不起作用。

是否可以将叠加层保留在 map 顶部，同时保留 map 的所有功能？

这是 JS fiddle 链接:

link

谢谢!

Answer 1

对于您可以使用的纯 CSS 解决方案

pointer-events: none;

在叠加层上。

https://jsfiddle.net/s69qnkcn/1/

虽然仅适用于现代浏览器，IE11 及更高版本:http://caniuse.com/#search=pointer-events