我以前没有在这里发过帖子,但是已经广泛阅读了,所以我希望我没有违反任何规则......
我试图在传单 map 上放置一种蒙版图像(一个带有透明圆孔的黑色正方形);使它看起来像旧示波器屏幕上显示的圆形 map ;-)。绝对定位在顶部:0px;底部:0px;。固定,独立于缩放或平移。
我可以让图像显示,在某些情况下我什至可以让 map 在透明孔中平移和缩放,我什至可以按 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,则 mask 不再显示,但弹出窗口会出现。
最佳答案
最简单的方法可能是使用 PNG 和以下 CSS 行:
指针事件:无;
它使元素下方的鼠标操作成为可能。
有关 IE 兼容性和更多信息,请参阅此处:Click through a DIV to underlying elements
关于javascript - 传单 map 上的固定图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18534820/