如何在隐藏的“显示:无；"状态下呈现传单地图.父母 [英] 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; parent中显示元素?

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.

推荐答案

正在发生的情况是，由于 display:none Map.code 实例无法正确计算尺寸，代码> 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 实例.它将强制地图(重新)渲染:

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屋！