我有一个<div>传单地图.在某些事件中,<div>将改变高度.我希望地图能够调整其周围的新尺寸,<div>以便旧中心位于调整大小较小或较大的地图中心.我尝试使用该invalidateSize()功能,但似乎根本不起作用.如何在map-container-resize事件发生后重新调整地图并使其居中?
$mapContainer.on('map-container-resize', function () {
map.invalidateSize(); // doesn't seem to do anything
});
Run Code Online (Sandbox Code Playgroud)
编辑以提供更多上下文:
地图容器最初的样式为
#map-container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: height 0.5s ease-in-out;
}
Run Code Online (Sandbox Code Playgroud)
用户单击某个按钮后,另一个面板显示在页面底部,地图容器的高度将减少到小于100%(例如80%).
单击此按钮后,将触发map-container-resize事件,以便我可以使地图调整大小并居中于旧的(即调整大小之前)中心.然后,地图本身也应调整到其初始高度的80%.
APi doc invalidateSize似乎是我想要的:
"检查地图容器大小是否已更改,如果是,则更新地图[...]"
但是getSize在调用invalidateSize之前和之后查看函数的输出,没有什么不同,地图保持其旧的大小.