Leafletjs map - map.invalidateSize不起作用

Question

我在我的應用程序中使用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以編程方式模擬窗口大小調整。但也沒有擴大地圖。

請讓我知道我做錯了什麼。

Answer 1

謝謝Yehoshaphat。我不想要全屏地圖。我只是想擴大一點地圖。

最後，我得到它的工作使用下面的代碼：

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

現在地圖展開以填充外容器的擴展空間。它不是很光滑;但它的工作原理。

Answer 2

我的建議是使用以下插件：https://github.com/brunob/leaflet.fullscreen，它爲全屏添加一個按鈕，自動展開地圖，如下圖所示：。