Leafletjs карта-карта.invalidateSize не работает

Я использую Leafletjs с плитками Google map в своем приложении. Вот моя разметка 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);
    }
 }

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

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

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

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

12
google-maps leaflet

2 ответов

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

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

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

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

10

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

2