修复了传单地图上的图像答案

【问题标题】：Fixed image over Leaflet map修复了传单地图上的图像
【发布时间】：2013-09-03 07:06:30
【问题描述】：

我之前没有在这里发帖，但已经阅读了很多，所以我希望我没有违反任何规则......

我正在尝试在传单地图上放置一种蒙版图像（一个带有透明圆形孔的黑色正方形）；使它看起来像显示在旧示波器屏幕上的圆形地图；-)。绝对位于顶部：0px；底部：0px；。固定，独立于缩放或平移。

我可以让图像显示，在某些情况下我什至可以让地图平移和放大透明孔，我什至可以按 X 关闭标记上的弹出窗口，但无论我尝试什么单击或触摸时，永远无法使标记弹出窗口出现。

我尝试了无数种组合：使用 PNG 图像或原始 SVG 代码，更改 z-index，是否在 div 中。我在同一个容器中尝试过，在不同的容器中，甚至将其添加到传单控制窗格中：

document.getElementsByClassName("leaflet-control-container")[0].innerHTML += '\
    <svg style="position: absolute; top:  0px; left: 0px; height: 360px; width: 360px;">\
        <g>\
            <path style="fill-rule: evenodd; fill: black; stroke: black; stroke-width: 0"\
                  d="M 0,0 L 360,0 L 360,360 L 0,360 z M 180,10 A 170,170 0 0,1 180,350 A 170,170 0 0,1 180,10 z"></path>\
        </g>\
    </svg>';

图像显示正常，但与 Leaflet 的交互已损坏，无法弹出交互。

如果我将 svg 的 z-index 设置为 -1，遮罩将不再显示，但弹出窗口会出现。

【问题讨论】：

我认为问题在于，如果您将图像放在其他东西上，即使图像是透明的，它也会覆盖下面的元素并且无法与之交互。我也很想看看是否有人提出了解决方案。
是的，不管内容是什么，它是一个覆盖整个地图的方形元素，它总是会造成麻烦。尽管如此，必须有一种方法来创建面具......

标签： javascript svg leaflet

【解决方案1】：

最简单的方法可能是使用 PNG 和以下 css 行：

指针事件：无；

它使元素下方的鼠标操作成为可能。

查看此处了解 IE 兼容性和更多信息：Click through a DIV to underlying elements

【讨论】：

顺便说一句，如果 pointer-events: none 与 img 标签不兼容，请尝试将 img 放在 div 中。
非常感谢您的回复，您为我节省了很多时间！相当聪明。它可以工作，包括在 Android 上。我使用了一个带有背景图像的 div 和神奇但鲜为人知的指针事件：无。然而，由于某种原因，它不适用于 Android 上的 svg 标签（认为在 Chrome 中有效）。
很高兴听到它成功了！奇怪的是，它不能在 Android 上的 svg 上运行，特别是因为该属性源自 svg。顺便说一句，你能把我的回答标记为接受吗？
如果您使用 SVG 作为 DIV 的背景图像，它可以在 Android 上运行。如果我尝试直接使用 SVG，它就不起作用。是的很奇怪...

【解决方案2】：

如果不是在地图上粘贴蒙版，而是将地图放在带有border-radius:50%; overflow:hidden 的 div 中，会怎样？不过，我从未使用过 Leaflet，所以据我所知，它在这些条件下无法正常工作。

【讨论】：

我这里做的是一个正方形，里面切了一个圆。