传单加载不完整的地图 [英] leaflet loads incomplete map
问题描述
我正在动态地将传单地图添加到 div.地图只显示了一部分,见图.一旦我调整浏览器窗口的大小,地图就会完全显示出来.有没有解决的办法?我尝试了一些初步的想法,参见代码中的//.但它们都不起作用.不完整的地图
函数 mapThis(lat,long,wikiTitle){var div_Id= "#wikiExtract"+wikiTitlevar map_Id=地图"+wikiTitle$(div_Id).append(" 解决方案 如果至少你的地图可以正常工作(除了瓦片加载不完整),你可以简单地调用 map.invalidateSize()
一旦地图的 div
容器被显示/插入到 DOM最终尺寸.
<块引用>检查地图容器大小是否发生变化,如果发生变化,则更新地图 - 在您动态更改地图大小后调用它,默认情况下也会为平移设置动画.
I am dynamically adding a leaflet map to a div. The map is only shown partially, see picture. Once I resize the browser window the map is completely shown. Is there a way around this? I tried some initial ideas, see // in code. But none of them worked.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 © <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');
}
解决方案 If at least you have the map working (except for the incompleteness of tiles loading), you could simply call map.invalidateSize()
once your map's div
container is revealed / inserted into DOM with final size.
Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default.
这篇关于传单加载不完整的地图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文