如何在隐藏的 "display: none;" 父级中渲染传单地图
How to render leaflet map when in hidden "display: none;" parent
我在页面上显示传单地图时遇到奇怪的行为。通常地图会按预期呈现并且运行良好。但是，我只想在 javascript 中检测到的表单发生错误时才显示地图。因此，如果我将父级 <div id="map"> 设置为 display: none; 并在以后根据需要显示它，则不会加载图块（或仅部分加载并且不会继续）并且地图奇怪地 "dislocated" （没有按照 js 中的定义居中）。
我的想法是，也许浏览器不会呈现 display: none; 父级中的元素？
我尝试使用 $(document).ready(...) 函数隐藏地图，但没有任何区别。一旦我隐藏和显示地图，相同的行为就会重复。我在 Firefox 44.0 和 Chromium 48.0 上对此进行了测试，行为是一致的。
任何提示都会有所帮助。这是远程加载元素 (ajax) 的一般行为吗？
编辑 1：
现在我知道了解决方案和解决方法（请参阅下面的答案），但我仍然不确定这是否是远程加载元素的全局行为？感谢您的任何解释。
编辑 2：
查看已接受的答案以获取解释。
解决方法似乎是仅在页面加载后隐藏地图，如下所示：
$( window ).load(function () {
$('#map').hide();
});
这样地图只有在完全渲染后才会隐藏。在此之后用 $('#map').show(); 显示它会显示一张地图，其中包含您期望的没有问题的已加载图块。
发生的事情是，由于 display:none CSS 规则，您的 L.Map 实例无法正确计算其尺寸。如果它没有获得正确的尺寸，它不知道要加载多少块以及如何布置它们，它只会加载 none。 XHR 与它无关。地图不知道XHR是什么，这就是问题所在。
从 display:none 切换到 display:block 后，调用 L.Map 实例上的 invalidateSize 方法。它将强制地图（重新）渲染：
Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default. If options.pan is false, panning will not occur. If options.debounceMoveend is true, it will delay moveend event so that it doesn't happen often even if the method is called many times in a row.
另一种解决方法是使用 opacity: 0; 或 height: 0px; 而不是 display: none;
我在页面上显示传单地图时遇到奇怪的行为。通常地图会按预期呈现并且运行良好。但是，我只想在 javascript 中检测到的表单发生错误时才显示地图。因此，如果我将父级 <div id="map"> 设置为 display: none; 并在以后根据需要显示它，则不会加载图块（或仅部分加载并且不会继续）并且地图奇怪地 "dislocated" （没有按照 js 中的定义居中）。
我的想法是，也许浏览器不会呈现 display: none; 父级中的元素？
我尝试使用 $(document).ready(...) 函数隐藏地图，但没有任何区别。一旦我隐藏和显示地图，相同的行为就会重复。我在 Firefox 44.0 和 Chromium 48.0 上对此进行了测试，行为是一致的。
任何提示都会有所帮助。这是远程加载元素 (ajax) 的一般行为吗？
编辑 1：
现在我知道了解决方案和解决方法（请参阅下面的答案），但我仍然不确定这是否是远程加载元素的全局行为？感谢您的任何解释。
编辑 2：
查看已接受的答案以获取解释。
解决方法似乎是仅在页面加载后隐藏地图，如下所示：
$( window ).load(function () {
$('#map').hide();
});
这样地图只有在完全渲染后才会隐藏。在此之后用 $('#map').show(); 显示它会显示一张地图，其中包含您期望的没有问题的已加载图块。
发生的事情是，由于 display:none CSS 规则，您的 L.Map 实例无法正确计算其尺寸。如果它没有获得正确的尺寸，它不知道要加载多少块以及如何布置它们，它只会加载 none。 XHR 与它无关。地图不知道XHR是什么，这就是问题所在。
从 display:none 切换到 display:block 后，调用 L.Map 实例上的 invalidateSize 方法。它将强制地图（重新）渲染：
Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default. If options.pan is false, panning will not occur. If options.debounceMoveend is true, it will delay moveend event so that it doesn't happen often even if the method is called many times in a row.
另一种解决方法是使用 opacity: 0; 或 height: 0px; 而不是 display: none;