jquery - 如何在隐藏 "display: none;"父级时渲染传单 map

Question

在我的页面上显示传单 map 时，我遇到了奇怪的行为。通常情况下， map 会按预期渲染并且运行良好。但是，我只想在我在 javascript 中检测到的表单中发生错误时才显示 map 。所以如果我设置父级 <div id="map">至display: none;并根据需要稍后显示它，图 block 未加载(或仅部分加载并且不继续)，并且 map 奇怪地“错位”(未按照js中的定义居中)。

我的想法是浏览器可能不会渲染 display: none; 内的元素 parent ？

我尝试用 $(document).ready(...) 隐藏 map 功能，但没有什么区别。当我隐藏和显示 map 时，同样的行为就会重复。我在 Firefox 44.0 和 Chromium 48.0 上对此进行了测试，行为是一致的。

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

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

Answer 1

发生的情况是，由于 display:none CSS 规则，您的 L.Map 实例无法正确计算其尺寸。如果它没有获得正确的尺寸，它不知道要加载多少 block 以及如何布局它们，它只会加载任何 block 。 XHR 与此无关。 map 不知道 XHR 的内容，这就是问题所在。

从 display:none 切换到 display:block 后，在 L.Map< 上调用 invalidateSize 方法 实例。它将强制 map (重新)渲染:

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.

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