Карта Leafletjs - map.invalidateSize не работает

Я использую Leafletjs с картами google в моем приложении. Вот моя разметка HTML:

<div class="map-wrap" style="display: none;">                                    
    <div id="map"></div>                    
</div>
<div class="rightNav">
    <a href="#" onclick="$.expandMap();">Expand Map</a>
</div>

В javascript файле у меня есть следующий код:

$.expandMap = function()    {
    if ($(".rightNav").is(':visible')){
        $(".map-wrap").animate({width:'70%'},'400');
        $(".rightNav").hide(0);
        map.invalidateSize();
        //L.Util.requestAnimFrame(map.invalidateSize, map, false, map._container);
    }
 }

Контейнер карты отлично расширяется. Но карта не расширяется. map.invalidateSize не расширяет карту или не заполняет внешний div (контейнер). L.Util.requestAnimFrame(map.invalidateSize, map, false, map._container); также не удалось.

Однако, если немного изменить размер окна браузера, карта заполнит внешний контейнер.

Итак, я думал, что попытаюсь имитировать изменение размера окна программным путем с помощью jQuery. Но это тоже не расширило карту.

Пожалуйста, дайте мне знать, что я делаю неправильно.

Ответ 1

Спасибо, Иосафат. Мне не нужна полная экранная карта. Я просто хотел немного расширить карту.

Наконец, я получил его, используя приведенный ниже код:

$.expandMap = function()    {
    if ($(".rightNav").is(':visible')){
            $(".map-wrap").animate({width:'70%'},'400');
            $(".rightNav").hide(0);
            setTimeout(function(){ map.invalidateSize()}, 400);
        }
 }

Теперь карта расширяется, чтобы заполнить расширенное пространство внешнего контейнера. Это не очень гладко; но он работает.

Ответ 2

Моя рекомендация для вас - использовать следующий плагин: https://github.com/brunob/leaflet.fullscreen, он добавляет кнопку для полного экрана, которые расширяют карту автоматически, как на следующей карте: .