Question

我有一个包含传单地图的<div>。在某些事件中，<div>的高度将被改变。我希望地图可以调整其周围<div>的新维度，以便旧中心位于已调整大小的较小或较大的地图中心。我尝试使用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％）。

单击此按钮后，将触发map-container-resize事件，以便我可以使地图调整大小并以旧的（即调整大小之前）中心为中心。然后，地图本身也应调整到其初始高度的80％。

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

＆＃34;检查地图容器大小是否已更改，如果是，则更新地图 [...]＆＃34;

但是在调用invalidateSize之前和之后查看getSize函数的输出，没有什么不同，地图保持旧的大小。

Answer 1

问题是#map-container div的大小调整是通过css转换完成的。当调用invalidateSize发生时，转换还没有开始，更不用说结束，因此传单映射无法识别其周围div的维度的任何变化。

延迟触发map-container-resize事件解决了问题。这样：

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

Answer 2

L.Map.invalidateSize()仅通知传单地图对象其容器大小已更改，因此应绘制更少或更多的地图图块。它实际上并没有改变任何尺寸，例如它包含<div>，并且不会移动地图。你应该自己做。

Answer 3

接受的答案有点愚蠢，因为它依赖于睡眠时间长于过渡时间。

我发现this效果很好：

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

Answer 4

只需调用调整窗口大小事件，而不是定时加载地图。

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

Answer 5

调整大小后，使用此

map.invalidateSize()

https://github.com/Leaflet/Leaflet/issues/690

Answer 6

我今天遇到了这个问题，想根据2020 Browser API提供更新的答案。本示例使用浏览器的ResizeObserver来监视Leaflet挂载的div的大小。假设以下HTML代码段：

<div id="map" />

使用以下JavaScript：

const mapDiv = document.getElementById("map");
const map = L.map(mapDiv).setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

const resizeObserver = new ResizeObserver(() => {
  map.invalidateSize();
});

resizeObserver.observe(mapDiv);

这应该监视地图div，并在地图div大小更改时在Leaflet地图上调用invalidateSize（）方法。这种方法使您可以处理与地图代码“更接近”的调整大小，而不必尝试依赖于窗口调整大小事件或侦听应用程序中其他位置触发的更改。

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

Answer 7

遇到运行VueJS，Leaflet 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会是

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

7 个答案: