[英]ng Leaflet Directive issue with ngRepeat + map.invalidateSize()
I have a page that generates a series of maps based off of an async call. 我有一个页面根据异步调用生成一系列地图。 When the maps first load, they are missing tiles, as seen in the below image. 首次加载地图时,它们会丢失图块,如下图所示。
I can resolve this by calling map.invalidateSize()
to redraw the tiles in each. 我可以通过调用map.invalidateSize()
来重新绘制每个中的图块来解决此问题。 Currently I create 8 on load and the rest are paginated via an Angular directive. 目前,我在加载时创建8,其余的通过Angular指令分页。 Toggling to any other 8 or switching back and forth will "fix" the first 8. 切换到任何其他8或来回切换将“修复”前8个。
Since these first 8 are the product of an ngRepeat
, they all have the same ID. 由于这前8个是ngRepeat
,因此它们都具有相同的ID。 I could, in theory, add the index or some other string modification to the ids of each of the 8 maps and create a loop of the below code to run map.invalidateSize()
on each, but this seems like a roundabout and overall poor solution to the issue. 从理论上讲,我可以将索引或其他一些字符串修改添加到8张地图的每张ID中,并创建以下代码循环以在每张地图上运行map.invalidateSize()
,但这看起来像是回旋处,总体而言效果不佳解决问题。 Does anyone have a better suggestion? 有谁有更好的建议?
leafletData.getMap('leafletMap-trips').then(function(map) {
setTimeout(function () { map.invalidateSize() });
});
As a matter of fact, nope. 事实上,不。 The leaflet API only allow size invalidation per-map, so you will pretty much need to do as you explained. 传单API仅允许每个地图的尺寸失效,因此您将非常需要按照说明进行操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.