Question

我正在动态地向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');

    }

Answer 1

如果你的地图至少有效（除了瓷砖加载的不完整性），你可以在地图的div容器被显示/插入到最终大小的DOM中时调用map.invalidateSize()。< / p>

检查地图容器大小是否更改并更新地图（如果是这样） - 在动态更改地图大小后调用它，默认情况下也为动画设置动画。

Answer 2

您可以使用以下代码：它为我找到了工作。

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

Answer 3

您无法动态创建div。

相反，你必须准备它隐藏（css：display：none;）

创建地图时，可以使div显示（css：display：block;）。

传单不具体：检查this

Answer 4

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

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

传单加载不完整的地图

4 个答案: