Resizing a leaflet map on container resize

问题:

I have a <div> containing a leaflet map. Upon certain events the height of the <div> will be altered. I'd like for the map to resize to the new dimensions of its surrounding <div> so that the old center is centered in the resized smaller or larger map. I tried using the invalidateSize() function, but it doesn't seem to work at all. How can I resize and center the map after that map-container-resize event?

$mapContainer.on('map-container-resize', function () {
   map.invalidateSize(); // doesn't seem to do anything
});

Edit to give more context:

The map container is styled initially as

#map-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    transition: height 0.5s ease-in-out;
}

After a user clicks a certain button, another panel shows at the bottom of the page and the map-container's height will be reduced to something less than 100% (say 80%).

Upon click on this button, the map-container-resize event is triggered so that I can make the map resize and center on its old (i.e. before the resizing happened) center. The map itself should then also be resized to 80% of its initial height.

The APi doc for invalidateSize seemed to be what I wanted:

"Checks if the map container size changed and updates the map if so [...]"

But having a look with the output of the getSize function before and after the call to invalidateSize, nothing is different, the map remains at its old size.

回答1:

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);

回答2:

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.

回答3:

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");
});

回答4:

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

回答5:

After resize, use this

map.invalidateSize()

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