我之前没有在这里发帖,但已经广泛阅读,所以我希望我不违反任何规则……
我试图在传单地图上放置一种掩模图像(一个带有透明圆孔的黑色正方形);使它看起来像旧示波器屏幕上显示的圆形地图;-).绝对位于顶部:0px;底部:0px;.固定,独立于缩放或平移.
我可以显示图像,在某些情况下我甚至可以让地图平移和放大透明孔,我甚至可以按X关闭标记上的弹出窗口,但无论我尝试什么,我都无法管理单击或触摸时使标记弹出窗口出现.
我尝试过多种组合:使用PNG图像或原始SVG代码,在div中改变z-index.
我尝试在同一容器中,在不同的容器中,甚至将其添加到传单控制窗格:
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,则不再显示掩码,但弹出窗口确实出现了.
解决方法:
最简单的方法可能是使用PNG和以下css行:
指针事件:无;
它使得元素下方的鼠标操作成为可能.
请参阅此处获取IE兼容性和更多信息:Click through a DIV to underlying elements