Leafletjs map - map.invalidateSize funktioniert nicht

Question

Ich benutze Leafletjs mit Google Map Kacheln in meiner Anwendung. Hier ist mein HTML-Markup:

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

in der JavaScript-Datei, ich habe den folgenden Code:

$.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); 
    } 
} 

Der Kartencontainer erweitert Ordnung. Aber die Karte expandiert nicht. map.invalidateSize erweitert die Karte nicht oder füllt das äußere div (Container) nicht. L.Util.requestAnimFrame (map.invalidateSize, Karte, false, map._container); auch gescheitert.

Wenn ich jedoch das Browserfenster ein wenig verkleinere, füllt die Karte den äußeren Container.

Also dachte ich, ich würde versuchen, die Fenstergrößenänderung programmgesteuert mit jQuery zu simulieren. Aber das hat auch die Karte nicht erweitert.

Bitte lassen Sie mich wissen, was ich falsch mache.

Answer 1

Danke Yehoshaphat. Ich wollte keine Vollbildkarte. Ich wollte nur die Karte ein wenig erweitern.

Schließlich ich habe es funktioniert den Code unten verwenden:

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

Die Karte nun den erweiterten Raum des äußeren Behälters füllen erweitert. Es ist nicht sehr glatt; Aber es funktioniert.

Answer 2

Meine Empfehlung für Sie ist, das folgende Plugin zu verwenden: https://github.com/brunob/leaflet.fullscreen, es fügt eine Schaltfläche für den Vollbildmodus, die die Karte automatisch erweitern, wie in der folgenden Karte: .