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

现在,地图会展开以填充外部容器的扩展空间.它不是很顺利; 但它的确有效.