在容器调整大小时调整leaflet地图的大小

10 浏览
0 Comments

在容器调整大小时调整leaflet地图的大小

我有一个包含地图传单的。在某些事件发生时，的高度会改变。我希望地图能够根据周围的新尺寸进行调整，使得旧的中心在调整后的较小或较大地图中保持居中。我尝试使用invalidateSize()函数，但它似乎完全不起作用。在map-container-resize事件之后，我该如何调整和居中地图？

$mapContainer.on('map-container-resize', function () {
    map.invalidateSize(); // 似乎没有任何效果
});

编辑以提供更多背景信息：

地图容器最初的样式为：

#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%。

invalidateSize函数的API文档似乎是我想要的：

"检查地图容器的大小是否发生了变化，如果有，则更新地图

[...]"

但是在调用invalidateSize之前和之后使用getSize函数的输出进行查看，没有任何变化，地图仍然保持原来的大小。

0