Javascript 单张地图上的固定图像

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

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

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

我尝试了无数种组合：使用PNG图像或原始SVG代码，更改z索引，是否在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>';        

document.getElementsByClassName（“传单控制容器”）[0]。innerHTML+='\
\
\
\
\
';        

图像显示正常，但与传单的交互已损坏，无法进行弹出式交互

---

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

如果不在地图上粘贴遮罩，而是将地图放在一个div中，边界半径为50%；溢出：隐藏？不过，我从未使用过传单，所以据我所知，在这种情况下它不会正常工作。

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

指针事件：无

它可以在元素下执行鼠标操作

---

有关IE兼容性和更多信息，请参见此处：

我认为问题在于，如果将图像置于其他内容之上，即使图像是透明的，它也会覆盖下面的元素，从而无法与之交互。我也很想看看是否有人提供了解决方案。是的，不管内容是什么，它是一个覆盖整个地图的正方形元素，它总是会引起麻烦。不过，必须有一种方法来创建掩码…顺便说一句，如果指针事件：none与img标记不兼容，请尝试将img放入div。非常感谢您的回复，您为我节省了很多时间！相当聪明。它可以工作，包括在Android上。我使用了一个带有背景图像的div和神奇但鲜为人知的指针事件：无。然而，由于某种原因，它不能在Android的svg标签上工作（虽然在Chrome中也能工作）。很高兴听到它工作了！听说它在Android上不支持svg很奇怪，特别是因为该属性源自svg。顺便说一句，你能将我的答案标记为已接受吗？如果你使用SVG作为DIV的背景图像，它在Android上工作。如果我尝试直接使用SVG，它就不工作。是的，奇怪……我在这里做的是一个正方形，里面有一个圆圈。