如何在隐藏的"显示：无;"中呈现传单地图;

Question

我在页面上显示传单地图时遇到奇怪的行为。通常，地图会按预期呈现并且运行良好。但是，我只想仅在我在javascript中检测到的表单中发生错误时才显示地图。因此，如果我将父<div id="map">设置为display: none;并稍后根据需要显示它，则不会加载切片（或仅部分加载并且不会继续），并且地图奇怪地"错位"（未按照 js 中定义居中）。

我的想法是，也许浏览器不会在display: none;父级中呈现元素？

我尝试使用 $(document).ready(...) 功能隐藏地图，但没有区别。一旦我隐藏并显示地图，同样的行为就会重复出现。我在Firefox 44.0和Chromium 48.0上对此进行了测试，行为是一致的。

这是远程加载元素 （ajax） 的一般行为吗？

我不确定这是否是远程加载元素的全局行为？

Answer 1

由于 CSS 规则display:none，您的 L.Map 实例无法正确计算其维度。如果它没有得到正确的尺寸，它不知道要加载多少瓷砖以及如何布置它们，它只是不加载任何内容。XHR与它无关。地图不知道XHR是什么，这就是问题所在。

从display:none切换到display:block在L.Map实例上调用 invalidateSize 方法。它将强制地图（重新）渲染：

检查地图容器大小是否更改，如果更改，则更新地图 - 在动态更改地图大小后调用它，默认情况下也会对平移进行动画处理。如果 options.pan 为假，则不会发生平移。如果 options.debounceMoveend 为 true，它将延迟 moveend 事件，这样即使该方法在连续多次调用，它也不会经常发生。

http://leafletjs.com/reference.html#map-invalidatesize

Answer 2

另一种解决方法是使用 opacity: 0; 或 height: 0px; 而不是display: none;

Answer 3

解决方法似乎是仅在页面加载后隐藏地图，如下所示：

$( window ).load(function () {
    $('#map').hide();
});

这样，地图只有在完全渲染后才会隐藏。在此之后显示它$('#map').show();显示一张带有加载图块的地图，您可以毫无问题地期望。