在我的页面上显示传单地图时，我遇到奇怪的行为。通常情况下，地图会按预期渲染并且运行良好。但是，我只想在我在 javascript 中检测到的表单中发生错误时才显示地图。所以如果我设置父级<div id="map"> to display: none;并根据需要稍后显示它，图块未加载（或仅部分加载并且不继续）并且地图奇怪地“错位”（未按照js中的定义居中）。
我的想法是，浏览器可能不会渲染 a 中的元素display: none; parent?
我尝试用隐藏地图$(document).ready(...)功能，但没有什么区别。当我隐藏和显示地图时，同样的行为就会重复。我在 Firefox 44.0 和 Chromium 48.0 上对此进行了测试，行为是一致的。
这是远程加载元素（ajax）的一般行为吗？
我不确定这是否是远程加载元素的全局行为？
发生的事情是你的L.Map实例无法正确计算其尺寸，因为display:noneCSS 规则。如果它没有获得正确的尺寸，它不知道要加载多少块以及如何布局它们，它只会加载任何块。 XHR 与此无关。地图不知道 XHR 是什么，这就是问题所在。
在您切换自之后display:none to display:block打电话给invalidateSize方法对你的L.Map实例。它将强制地图（重新）渲染：
检查地图容器大小是否更改，如果更改则更新地图 - 在动态更改地图大小后调用它，并且默认情况下还会对平移进行动画处理。如果 options.pan 为 false，则不会发生平移。如果 options.debounceMoveend 为 true，则会延迟 moveend 事件，这样即使连续调用该方法多次，该事件也不会经常发生。
http://leafletjs.com/reference.html#map-invalidatesize http://leafletjs.com/reference.html#map-invalidatesize
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
