传单加载不完整的地图答案

【问题标题】：leaflet loads incomplete map传单加载不完整的地图
【发布时间】：2016-07-02 10:06:56
【问题描述】：

我正在动态地将传单地图添加到 div。地图只显示了一部分，见图。一旦我调整浏览器窗口的大小，地图就会完全显示出来。有没有解决的办法？我尝试了一些初步的想法，参见代码中的 //。但他们都没有工作。incomplete map

    function mapThis(lat,long,wikiTitle){       

     var div_Id= "#wikiExtract"+wikiTitle
     var map_Id= "map"+wikiTitle
     $(div_Id).append("<div id='"+map_Id+"' style='width: 600px; height:
     400px'></div>"); 
     var map = L.map(map_Id).setView([lat, long], 10);

     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 18,
     attribution: 'Map data &copy; <a
     href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-
          SA</a>'
      }).addTo(map);


     //$("#"+map_Id).css( "height", "500px" );
     //map.invalidateSize()
     //$("#"+map_Id).hide()   
     //$("#"+map_Id).show()
     //$(window).trigger('resize');

    }

【问题讨论】：

标签： leaflet

【解决方案1】：

如果使用 JQuery，以下代码会在文档准备好后更新大小：

$(document).ready(function () {
    mymap.invalidateSize();
});

【讨论】：

【解决方案2】：

您可以使用以下代码：它对我有用。

setInterval(function () {
   map.invalidateSize();
}, 100);

【讨论】：

【解决方案3】：

如果至少您的地图可以正常工作（除了图块加载不完整），您可以在地图的 div 容器以最终大小显示/插入到 DOM 后简单地调用 map.invalidateSize()。

检查地图容器大小是否发生变化，如果发生变化，则更新地图 - 在您动态更改地图大小后调用它，默认情况下也会为平移设置动画。

【讨论】：

我试过这个，但并没有改变行为。
确保在您的地图容器显示并具有最终尺寸之后调用它。例如，当您调整浏览器窗口大小时，它会自动调用，但您当然不想等待用户执行该操作只是为了让您的地图正常工作。
谢谢。我相应地改变了我的用例。
地图容器显示后我无法调用map.invalidateSize()。我得到的参考没有定义。如何让map 变量使用？
嗨@SashkoLykhenko，听起来你最好用你的问题的细节来打开你自己的问题，包括一些重现问题的示例代码。否则不可能用这么少的细节告诉你如何帮助你。