Javascript 在调整容器大小时调整传单贴图的大小

我有一个

包含传单地图。在某些情况下，

的高度将改变。我希望将地图调整为其周围的新尺寸

，以便旧中心位于调整大小的较小或较大地图的中心。我尝试使用

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%）

单击此按钮后，将触发“地图容器调整大小”事件，以便我可以调整地图的大小并将其居中于旧中心（即在调整大小之前）。然后，地图本身的大小也应调整为其初始高度的80%

invalidateSize

的APi文档似乎就是我想要的：

“检查地图容器大小是否更改，如果更改，则更新地图 [……]”

---

但是，在调用invalidateSize前后查看

getSize

函数的输出，没有什么不同，贴图仍保持原来的大小。

L.map.invalidateSize（）

仅通知传单贴图对象其容器大小已更改，因此应该绘制更少或更多的贴图分幅。它实际上不会更改任何尺寸，例如其包含的

，也不会移动地图。你应该自己做。

问题是

#map container

div

的大小调整是通过css转换完成的。当调用invalidateSize时，转换尚未开始，更不用说结束了，因此传单地图无法识别其周围

div

的任何尺寸变化

延迟触发

map container resize

事件解决了问题。这样：

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

---

公认的答案有点老套，因为它依赖于睡眠时间比过渡时间长

我发现它工作得很好：

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

---

运行VueJS时遇到此问题，请参阅手册1.2.0。调整大小似乎不像上面提到的其他人那样完整。我在VueJS中的解决方案是调用nextTick函数：

  var vm = this
  var container = vm.$refs.container
  vm.mapStyle.width = `${vm.getElementContentWidth(container)}px`
  vm.mapStyle.height = `${vm.getElementContentHeight(container)}px`
  vm.$nextTick(() => {
    if (vm.map) vm.map.invalidateSize()
    if (vm.layerBase) vm.layerBase.redraw()
  })

---

我相信纯javascript应该是在调整大小之后，您可以使用下面的代码

map.invalidateSize（）

---

我今天遇到了这个问题，希望提供一个基于2020浏览器API的更新答案。此示例使用浏览器的来监视安装传单的div的大小。假设以下HTML代码段：

<div id="map" />

这将监视map div，并在map div大小更改时调用传单map上的invalidateSize（）方法。这种方法允许您处理与映射代码“更接近”的大小调整，而不是试图依赖窗口大小调整事件或侦听应用程序中其他地方触发的更改

---

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

只需调用“调整窗口大小”事件，而不必计时加载地图

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().

---

这需要更多的背景。您是否实际触发了

映射容器调整大小
事件？CSS中的地图大小是多少？你是说“调整大小”事件吗？这一项对（'resize'）有效。
仅适用于窗口大小调整，而
地图容器大小调整
不存在。那么这里的实际事件是什么呢？请注意。感谢下一次使用invalidateSize解决了我的问题！工作示例：这应该是最好的答案！谢谢这个解决方案非常干净，到目前为止对我来说非常有效，这个方法有什么缺点吗？是的。如果您希望在主应用程序级别检测真实的窗口大小调整事件，请在将来进行说明。上述过程将产生一个虚假信号。这是在启动期间，或者取决于您调用上述进程的次数。
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().