10

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

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

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

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

编辑1：

现在我知道了解决方案和解决方法（见下面的答案），但我仍然不确定这是否是远程加载元素的全局行为？感谢您的任何解释。

编辑2：

请参阅接受的答案以获取解释。

4

3 回答 3

22

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

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

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

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

于 2016-02-05T11:01:25.027 回答
2

另一种解决方法是使用opacity: 0;orheight: 0px;代替display: none;

于 2017-01-18T12:57:38.713 回答
0

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

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

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

于 2016-02-05T09:32:11.467 回答