Question

我刚刚开始创建Leaflet webapp并且我没有绘制矩形。当我加载页面时，它显示一瞬间，几乎在地图加载之前，然后它就消失了（在Chrome浏览器中，在Firefox中它根本没有显示）。我在这里缺少什么？

以下是我的代码：

<script>
    var bounds = [[52.42, 4.78], [52.46, 4.88]];
    var map = L.map('map', {

    maxBounds: bounds,
    minZoom: 14


    }).setView([52.44, 4.83], 14);

    var googleLayer = new L.Google('ROADMAP');
    map.addLayer(googleLayer);

    $(document).ready(function() {
        L.rectangle(bounds, {color: "red", weight: 1}).addTo(map);
    });
</script>

我尝试在$（document）.ready（）事件中绘制矩形，但这不起作用。

Answer 1

隐藏矩形，因为谷歌图层被绘制在顶部。可能是一个bug，我希望这些图层在z顺序中添加它们。快速修复（检查副作用）是使用CSS样式强制执行所需的顺序，如下所示：

.leaflet-google-layer{
    z-index: 0 !important;
}
.leaflet-map-pane{
    z-index: 100;
}

传单矩形立即消失

1 个答案: