如何在隐藏的"display:none;"中渲染传单地图 亲

Question

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

我的想法是,浏览器可能不会在display: none;父级内部渲染元素？

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

任何提示都会有所帮助.这是远程加载元素(ajax)的一般行为吗？

编辑1:

现在我知道解决方案和解决方法(请参阅下面的答案),但我仍然不确定这是否是远程加载元素的全局行为？谢谢你的任何解释.

编辑2:

请参阅接受的答案以获得解释.

Answer 1

发生的事情是,L.Map由于display:noneCSS规则,您的实例无法正确计算其维度.如果它没有得到适当的尺寸,它不知道要加载多少个瓷砖以及如何将它们放置,它只是不加载.XHR与它无关.地图不知道XHR是什么,这就是问题所在.

在您切换display:none到display:block调用实例invalidateSize上的方法之后L.Map.它将强制地图(重新)渲染:

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

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