我正在展示一张传单地图。在某些时候，我知道地图容器中地图可见区域的纬度边界。
如果用户调整容器的大小，我想要平移/缩放，以便可见的地图区域保持不变（使用实现这一目标的最大缩放）。
我知道我可以使用 map.on('moveend Zoomend', myFn) （调用 (map.getBounds()) 来跟踪可见的地图边界，但我不太确定如何监听地图容器的大小调整我可以使用map.getContainer()获取容器。
此外，我有两个对话框，当它们打开时，它们会覆盖地图的一部分，当该对话框打开/关闭时，我想做同样的事情，更改平移/缩放，以便地图区域在在最大变焦下，不断变化的房地产仍然可见。
所以我需要根据两个对话框的隐藏状态找到可见的最大像素矩形，然后以某种方式设置地图，以便该像素矩形显示所需的地图边界，我真的不知道如何处理这个问题.
我发现一个插件使用 map.panBy() 在特定对话框打开/关闭时将地图移动增量，这很有趣，但并不能解决我的问题。
我正在制作的地图是这样的： https://supragamescommunity.github.io/maps/
所以右上角的图层对话框扩大/缩小就是一个例子。
但我正在努力添加左侧和右侧边栏对话框，如下所示： https://joric.github.io/supraland/3d/
非常感谢任何指点。
至于放大或缩小地图，这是如何处理的一个小示例。当然，它并不完美，但它对于工作的开始很有用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet Map Resize Example with Zoom</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>
#map {
width: 100%;
height: 100%;
}
#container {
width: 600px;
height: 400px;
resize: both;
overflow: auto;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<div id="map"></div>
</div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
// Inicjalizacja mapy
var map = L.map('map').setView([52.22977, 21.01178], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
function resizeMap() {
map.invalidateSize();
const container = document.getElementById('container');
const width = container.offsetWidth;
const height = container.offsetHeight;
const newZoom = Math.min(Math.max(1, Math.floor(width / 100)), 18);
map.setZoom(newZoom);
}
const container = document.getElementById('container');
const observer = new ResizeObserver(function(entries) {
for (let entry of entries) {
resizeMap();
}
});
observer.observe(container);
</script>
</body>
</html>