根据集装箱大小调整传单地图的大小

我有一张包含传单地图的 <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%)。

点击这个按钮，地图-容器-调整大小事件就会被触发，这样我就可以让地图调整大小并以它的旧中心为中心(即在调整大小发生之前)。地图本身也应该调整到其初始高度的80% 。

invalidateSize的 API 文档似乎就是我想要的:

”检查映射容器的大小是否发生变化，如果发生变化，则更新映射 [...]"

但是，在调用 valididateSize 之前和之后查看 getSize函数的输出，没有什么不同，映射仍然保持原来的大小。

77410 次浏览
小开

L.Map.invalidateSize() only informs leaflet map object that its container size has been changed, and therefore is should draw less or more map tiles. It does not actually change any dimensions, e.g. of its containing <div>, and does not move the map. You should do it yourself.

小开
最佳答案

The problem is that the resizing of the #map-container div is done via a css transition. The transition hasn't started yet, let alone ended, when the call to invalidateSize happens so the leaflet map cannot recognize any change of dimensions of its surrounding div.

Triggering the map-container-resize event with a delay solved the problem. This way : 

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

the accepted answer is a bit hacky in that it relies on the sleep being longer than the transition.

I have found this to work well:

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

Ran into this problem running VueJS, Leaflet 1.2.0. The resizing didn't appear complete as others mentioned above. My solution within VueJS was to call the nextTick function:

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

I believe pure javascript would be

小开

You can use below code after resize that

map.invalidateSize()

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

小开

I came across this question today and wanted to provide an updated answer based on 2020 Browser API. This example uses the Browser's ResizeObserver to monitor the size of the div that Leaflet is mounted too. Assuming the following HTML Snippet:

<div id="map" />

With the following 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);

This should monitor the map div, and call the invalidateSize() method on the Leaflet map when the map div size changes. This approach allows you to handle the resizing "closer" to the map code, rather than trying to rely on window resize events or listening for changes triggered elsewhere in the application.

Obviously the CSS for the map div itself will need to ensure that it resizes in whatever way you want it to. This code snippet will ensure the Leaflet is appropriately updated when that happens.

小开

Just call resize window event rather than timing the map to load.

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

提交答案