在容器调整大小时调整传单映射的大小

Question

我有一个<div>传单地图.在某些事件中,<div>将改变高度.我希望地图能够调整其周围的新尺寸,<div>以便旧中心位于调整大小较小或较大的地图中心.我尝试使用该invalidateSize()功能,但似乎根本不起作用.如何在map-container-resize事件发生后重新调整地图并使其居中？

$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%).

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

APi doc invalidateSize似乎是我想要的:

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

但是getSize在调用invalidateSize之前和之后查看函数的输出,没有什么不同,地图保持其旧的大小.

Answer 1

问题是调整大小#map-container div是通过css转换完成的.当对invalidateSize的调用发生时,转换尚未开始,更不用说结束了,因此传单映射无法识别其周围维度的任何变化div.

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

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

Answer 2

L.Map.invalidateSize()仅通知传单地图对象其容器大小已更改,因此应绘制更少或更多的地图图块.它实际上不会改变任何尺寸,例如其包含的尺寸,<div>也不会移动地图.你应该自己做.

Answer 3

调整大小后，您可以使用以下代码

map.invalidateSize()

https://github.com/Leaflet/Leaflet/issues/690

Answer 4

只需调用调整窗口大小事件，而不是定时加载地图。

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

window.dispatchEvent(new Event('resize'));  


// Triggers a window resize 
// Thus your map automatically triggers invalidateSize().

Answer 5

接受的答案有点愚蠢,因为它依赖于睡眠比转变更长.

我发现这很好用:

$("body").on($.support.transition.end, '#main-navbar .nav-collapse', function(event){    
    console.log("end of the animation");
});

Answer 6

我今天遇到了这个问题，想根据 2020 浏览器 API 提供更新的答案。此示例使用浏览器的ResizeObserver来监视 Leaflet 也安装的 div 的大小。假设以下 HTML 片段：

<div id="map" />

使用以下 JavaScript：

const mapDiv = document.getElementById("map");
const map = L.map(mapDiv).setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

const resizeObserver = new ResizeObserver(() => {
  map.invalidateSize();
});

resizeObserver.observe(mapDiv);

这应该监视地图 div，并在地图 div 大小更改时调用 Leaflet 地图上的 invalidateSize() 方法。这种方法允许您处理“更接近”地图代码的调整大小，而不是试图依赖窗口调整大小事件或监听应用程序中其他地方触发的更改。

显然，地图 div 本身的 CSS 需要确保它以您想要的任何方式调整大小。此代码片段将确保在发生这种情况时适当更新传单。