Leafletjs 地图 - map.invalidateSize 不起作用 [英] Leafletjs map - map.invalidateSize is not working

问题描述

我在我的应用程序中使用 Leafletjs 和谷歌地图图块.这是我的 HTML 标记:

I use Leafletjs with google map tiles in my application. Here is my HTML markup:

<div class="map-wrap" style="display: none;">                                    
    <div id="map"></div>                    
</div>
<div class="rightNav">
    <a href="#" onclick="$.expandMap();">Expand Map</a>
</div>

在 javascript 文件中，我有以下代码:

In the javascript file, I have the following code:

$.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);也失败了.

The map container expands fine. But the map is not expanding. map.invalidateSize is not expanding the map or filling the outer div (container). L.Util.requestAnimFrame(map.invalidateSize, map, false, map._container); also failed.

但是，如果我稍微调整浏览器窗口的大小，地图就会填满外部容器.

However, if I resize the browser window a little bit, the map fills the outer container.

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

So I thought I would try to simulate the window resize programmatically using jQuery. But the too didn't expand the map.

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

Please let me know what I'm doing wrong.

推荐答案

感谢 Yehoshahat.我不想要全屏地图.我只是想把地图扩大一点.

Thanks Yehoshaphat. I did not want a full screen map. I just wanted to expand the map a little bit.

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

Finally, I got it working using the below code:

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

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

The map now expands to fill the expanded space of the outer container. It is not very smooth; but it works.

这篇关于Leafletjs 地图 - map.invalidateSize 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！