调整传单地图的大小时，如何保持地图居中？答案

【问题标题】：When resizing a leaflet map how can I keep the map centered?调整传单地图的大小时，如何保持地图居中？
【发布时间】：2014-06-09 23:35:02
【问题描述】：

我正在使用leaftlet 在网页上创建地图。

地图的左侧是一个滑出的面板。

当面板滑出时，地图会调整大小以填充页面上的剩余空间。

当面板向左滑出时，地图调整中心点向左移动。

理想情况下，地图的中心点应保持在相对中心。

狡猾的 ASCII 表示：（“.”代表地图的初始中心点。）

Panel closed:          [][    .    ]

Panel open (current):  [  ][     . ]

Panel open (desired):  [  ][   .   ]

这是一个重现问题的jsFiddle。

【问题讨论】：

让面板在地图上滑动怎么样？（因此不需要重新居中/重新绘制/等）
然后它涵盖了用于缩放的地图控件等等。我考虑过将它移到右侧并让它在地图上滑动，但我希望它能够按预期工作。
我无法重现这一点，因为每当我调整地图大小时，中心都停留在中心。也就是说，使用调整大小事件处理程序可能会起作用：leafletjs.com/reference.html#map-resize
我添加了一个 jsFiddle 来重现这个问题。

标签： leaflet

【解决方案1】：

Looking at your JSFiddle, if you Inspect Element (right click option on Chrome) on the DIV that holds the map, #map-containerDiv, you'll see that when the options DIV, #mapOptions, slides right, the map div 实际上被推到右边而不是调整大小。

换句话说，地图的中心点实际上并没有改变。
地图 div 只是向右滑动，div 的右侧被隐藏了。

【讨论】：

【解决方案2】：

在传单地图大小更改后，我通过调用 ~~$(window).resize()~~ 解决了这个问题

更新：看来您需要改为致电 map.invalidateSize()

更新小提琴http://jsfiddle.net/YwbLg/11/（动画不漂亮）

【讨论】：

我已经在 Chrome 和 IE 中检查了更新的小提琴链接，但问题仍然存在。展开面板前的地图中心不是展开面板后的地图中心。
抱歉，我不确定为什么小提琴不起作用。如果您在打开面板后调整窗口大小，您会看到它与需要重新绘制的地图有关，因为地图确实会跳回居中。
动画完成后好像可以调用map.invalidateSize()
如果告诉传单地图的大小已经改变但我不想保持中心怎么办？那个动画很丑
@AlexandruC 在较新的传单版本中，您可以使用map.invalidateSize({pan: false})