Leafletjs地图 - map.invalidateSize不起作用

Question

我在我的应用程序中使用了带有谷歌地图图块的Leafletjs。这是我的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，它会添加一个全屏按钮，自动展开地图，如下图所示：。