Изменение размера карты листовки при изменении размера контейнера

У меня есть <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% от ее начальной высоты.

APi doc для invalidateSize, казалось, был тем, что я хотел:

"Проверяет, изменился ли размер контейнера карты и обновил карту, если это так [...]"

Но имея представление с результатом функции getSize до и после вызова invalidateSize, ничего не изменилось, карта остается прежним.

Ответы

Ответ 1

Проблема заключается в том, что изменение размера #map-container div осуществляется через css-переход. Переход еще не начался, не говоря уже о завершении, когда вызов invalidateSize происходит, поэтому карта листовка не может распознать изменения размеров окружающих div.

Запуск события map-container-resize с задержкой решил проблему. Таким образом:

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

Ответ 2

L.Map.invalidateSize() только информирует объект карты буклета о том, что размер его контейнера был изменен, и поэтому он должен рисовать меньше или больше плиток карт. Это фактически не изменяет никаких измерений, например. его содержащего <div> и не перемещает отображение. Вы должны сделать это сами.

Ответ 3

принятый ответ немного взломан, поскольку он полагается на сон длиннее, чем переход.

Я нашел этот, чтобы хорошо работать:

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

Ответ 4

Включите эту проблему с помощью 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 будет