javascript - 在容器调整大小时调整传单 map 的大小

Question

我有一个 <div>包含传单 map 。在某些事件中，<div> 的高度将被改变。我想让 map 根据其周围的新尺寸调整大小 <div>以便旧中心在调整大小的较小或较大 map 中居中。我尝试使用 invalidateSize()功能，但它似乎根本不起作用。之后如何调整 map 大小和居中 map-container-resize事件？

$mapContainer.on('map-container-resize', function () {
   map.invalidateSize(); // doesn't seem to do anything
});

编辑以提供更多上下文:

map 容器最初的样式为

#map-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    transition: height 0.5s ease-in-out;
}

用户单击某个按钮后，页面底部会显示另一个面板， map 容器的高度将减小到小于 100%(比如 80%)。

单击此按钮后，将触发 map-container-resize 事件，以便我可以调整 map 大小并以其旧(即调整大小发生之前)中心为中心。然后 map 本身也应该调整到其初始高度的 80%。

invalidateSize 的 API 文档似乎是我想要的:

"Checks if the map container size changed and updates the map if so [...]"

但是看看 getSize 的输出调用 invalidateSize 之前和之后的函数，没有什么不同， map 保持原来的大小。

Answer 1

问题是 #map-container div 的大小调整是通过 css 转换完成的。当调用 invalidateSize 时，转换尚未开始，更不用说结束了，因此传单 map 无法识别其周围 div 的任何尺寸变化。

延迟触发 map-container-resize 事件解决了这个问题。这样:

setTimeout(function(){ map.invalidateSize()}, 400);