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

谢谢叶霍沙法。我不想要全屏地图。我只是想扩大一点地图。

最后，我使用下面的代码让它工作：

$.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，它添加了一个全屏按钮，自动展开地图，如下图所示：

：。