У меня есть <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, ничего не изменилось, карта остается прежним.