在容器调整大小时调整传单映射的大小 [英] Resizing a leaflet map on container resize

问题描述

我有一个包含传单地图的< 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);

这篇关于在容器调整大小时调整传单映射的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！