在容器调整大小时调整传单地图的大小

2022-01-12 00:00:00 resize leaflet javascript

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

I have a <div> containing a leaflet map. Upon certain events the height of the <div> will be altered. I'd like for the map to resize to the new dimensions of its surrounding <div> so that the old center is centered in the resized smaller or larger map. I tried using the invalidateSize() function, but it doesn't seem to work at all. How can I resize and center the map after that map-container-resize event?

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

编辑以提供更多上下文:

地图容器最初的样式为

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

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

用户单击某个按钮后，页面底部会显示另一个面板，并且地图容器的高度将降低到小于 100%(例如 80%).

After a user clicks a certain button, another panel shows at the bottom of the page and the map-container's height will be reduced to something less than 100% (say 80%).

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

Upon click on this button, the map-container-resize event is triggered so that I can make the map resize and center on its old (i.e. before the resizing happened) center. The map itself should then also be resized to 80% of its initial height.

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

The APi doc for invalidateSize seemed to be what I wanted:

"检查地图容器大小是否改变，如果改变则更新地图[...]"

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

但是看看调用 invalidateSize 前后 getSize 函数的输出，没有什么不同，地图保持原来的大小.

But having a look with the output of the getSize function before and after the call to invalidateSize, nothing is different, the map remains at its old size.

推荐答案

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

The problem is that the resizing of the #map-container div is done via a css transition. The transition hasn't started yet, let alone ended, when the call to invalidateSize happens so the leaflet map cannot recognize any change of dimensions of its surrounding div.

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

Triggering the map-container-resize event with a delay solved the problem. This way : 

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

相关文章