隐藏“显示:无"时如何渲染传单地图父母 [英] How to render leaflet map when in hidden "display: none;" parent

问题描述

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

I am experiencing strange behaviour when displaying leaflet map on my page. Normally the map is rendered as expected and works well. However I want to display the map only when an error occurs in forms which I detect in javascript. So if I set the parent <div id="map"> to display: none; and show it later as needed, the tiles are not loaded (or only partially load and do not continue) and the map is strangely "dislocated" (not centred as defined in js).

我的想法是，也许浏览器没有呈现 display: none; 父级中的元素?

My thought is that maybe the browser does not render the elements inside a display: none; parent?

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

I tried hiding the map with the $(document).ready(...) function but it made no difference. The same behaviour repeats as soon as I hide and show the map. I tested this on Firefox 44.0 and Chromium 48.0 and the behaviour is consistent.

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

Any tip would be helpful. Is this general behaviour for remotely loaded elements (ajax)?

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

Now I know the solution and a workaround (see the answers bellow), but I am still unsure if this is a global behaviour for remotely loaded elements? Thanks for any explanation.

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

See the accepted answer for explanation.

推荐答案

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

What's happening is that your L.Map instance can not correctly calculate it's dimensions because of the display:none CSS rule. If it doesn't get the proper dimensions it doesn't know how many tiles to load and how to lay them out, it just loads none. XHR has nothing to do with it. The map doesn't know what to XHR, that's the problem.

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

After you've switched from display:none to display:block call the invalidateSize method on your L.Map instance. It will force the map to (re)render:

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

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

这篇关于隐藏“显示:无"时如何渲染传单地图父母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！