父div宽度更改后重绘角度传单地图答案

【问题标题】：angular leaflet map redraw after parent div width change父div宽度更改后重绘角度传单地图
【发布时间】：2015-02-02 09:45:10
【问题描述】：

我在引导 div 中有一张传单地图：

<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')

效果很好，但是当我现在对地图进行设置边界等操作时，角度会使用旧地图宽度。

如何对地图进行重绘或其他操作，以让 angular 知道新的宽度？

最好的约尔格

【问题讨论】：

首先你应该避免在 Angular 代码中使用 jQuery。看看here如何替换toggleClass()。

标签： html css angularjs leaflet

【解决方案1】：

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

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

这是invalidateSize上的参考：http://leafletjs.com/reference.html#map-invalidatesize

检查地图容器大小是否发生变化，如果发生变化，则更新地图 - 在动态更改地图大小后调用它

【讨论】：