Leafletjs地图 - map.invalidateSize不起作用

Question

我在我的应用程序中使用Leafletjs和Google地图瓦片。这是我的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 编程模拟窗口调整大小。但它也无法扩展地图。

请告诉我我做错了什么。

- user3439044

Answer 1

谢谢Yehoshaphat。我不想要一个全屏地图，只是想把地图扩大一点。

最终，我使用以下代码让它正常工作：

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

现在地图会扩展以填满外部容器的扩展空间。这个过程不太平滑，但是它有效。

- user3439044

---

map.invalidateSize(true); 对我起了作用。而不是设置一个时间延迟。 - Harshani

Answer 2

我建议您使用以下插件：https://github.com/brunob/leaflet.fullscreen，它会添加一个全屏按钮，可以自动扩展地图，如下图所示：。

- Yehoshaphat Schellekens

---

哇，太棒了！问题：你自己制作了 icon-fullscreen.png 和 icon-fullscreen-2x 的版本吗？因为这就是我不得不做的，因为默认的图像还有很多需要改进的地方。我让我的看起来和你的一样 - 基本上是 YouTube 全屏图标的克隆。 - Todd Lehman

我很久以前创建了它，所以我真的记不得了 :( - Yehoshaphat Schellekens