html - 父 div 宽度更改后 Angular 传单 map 重绘

Question

我在 bootstrap div 中有一张传单 map :

<div class="col-xs-10 col-xs-offset-1" id="kartencol">
      <leaflet defaults="defaults" center="center" paths="meinePfade" bounds="bounds"     decorations="decorations" width="100%" height="480px" markers="markers"></leaflet>
</div>

我使用 jquery 和 css 动画来改变 col div 的宽度并在其旁边放置一个表单。

$('#kartencol').toggleClass('col-xs-10 col-xs-7')
$('#formcol').toggleClass('col-xs-0 col-xs-3')

它工作得很好，但是当我现在对 map 做一些事情时，比如设置边界，angular 会用旧的 map 宽度来做这件事。

如何对 map 进行重绘或其他操作，让 Angular 知道新的宽度？

最佳约尔格

Answer 1

您可以通过调用 L.Map 实例的 invalidateSize 函数来完成此操作。使用 angular-leaflet-directive 时，您可以通过在 Controller 中使用 leafletData.getMap 函数获取 map 实例:

leafletData.getMap().then(function(map) {
    map.invalidateSize();
});

这是关于invalidateSize 的引用:http://leafletjs.com/reference.html#map-invalidatesize

Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically