我在页面上显示传单Map时遇到了奇怪的行为。通常，Map会按预期渲染，并且工作良好。然而，我只想在javascript中检测到表单发生错误时才显示Map。因此，如果我将父<div id="map">设置为display: none;并在需要时显示，则不会加载切片（或者只是部分加载而不继续），并且Map会奇怪地“错位”（没有按照js定义的居中）。
我的想法是，也许浏览器不会渲染display: none;父元素中的元素？
我试着用$(document).ready(...)函数隐藏Map，但没有什么区别。当我隐藏并展示Map时，同样的行为重复。我在Firefox 44上测试过。0和 chrome 48。0，行为是一致的。
这是远程加载元素（ AJAX ）的一般行为吗？
我不确定这是否是远程加载元素的全局行为？
3条答案
按热度按时间z9ju0rcb1#
现在发生的事情是，由于
display:noneCSS规则，L.Map示例无法正确计算其维度。如果它没有得到正确的尺寸，它就不知道要加载多少块瓷砖以及如何布局它们，它只会不加载任何瓷砖。XHR与此无关。Map不知道什么是XHR，这就是问题所在。从
display:none切换到display:block后，在L.Map示例上调用invalidateSize方法。它将强制贴图进行（重新）渲染：检查Map容器的大小是否改变了，如果改变了，就更新Map--在你动态地改变了Map大小之后调用它，默认情况下也是动画平移。如果选项。pan为false，则不会发生平移。如果选项。debounceMoveend为true，它将延迟moveend事件，这样即使连续多次调用该方法，它也不会经常发生。
http://leafletjs.com/reference.html#map-invalidatesize
ccrfmcuu2#
另一种解决方法是使用
opacity: 0;或height: 0px;代替display: none;cwxwcias3#
解决方法似乎是只有在页面加载后才隐藏Map，如下所示：
这样，贴图仅在完全渲染后才隐藏。在此之后，用
$('#map').show();显示一个带有加载瓷砖的Map，你会期望没有问题。