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

问题描述

我在应用程序中将Leafletjs与Google地图图块一起使用.这是我的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.

推荐答案

感谢Yehoshaphat.我不想要全屏地图.我只想将地图扩大一点.

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.

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