相关疑难解决方法(0)

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

我有一个<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之前和之后查看函数的输出,没有什么不同,地图保持其旧的大小.

javascript resize leaflet

40
推荐指数
6
解决办法
4万
查看次数

标签 统计

javascript ×1

leaflet ×1

resize ×1