传单加载不完整的地图

Question

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

    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

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

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

Answer 2

如果至少你有地图工作（除了瓦片加载的不完整），你可以map.invalidateSize()在你的地图div容器被显示/插入到具有最终大小的 DOM 时简单地调用。

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