google-maps - Leafletjs map - map.invalidateSize 不起作用

Question

我在我的应用程序中使用 Leafletjs 和谷歌地图图 block 。这是我的 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 容器扩展良好。但 map 并没有扩大。
map.invalidateSize 不会扩展 map 或填充外部 div(容器)。
L.Util.requestAnimFrame(map.invalidateSize, map, false, map._container);也失败了。

但是，如果我稍微调整浏览器窗口的大小， map 就会填充外部容器。

所以我想我会尝试使用 jQuery 以编程方式模拟窗口调整大小。但也没有扩大 map 。

请让我知道我做错了什么。

Answer 1

谢谢约沙法特。我不想要全屏 map 。我只是想稍微扩展一下 map 。

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

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

map 现在扩展以填充外部容器的扩展空间。它不是很光滑；但它有效。