传单地图未根据目标元素的尺寸调整大小

Question

我很难让传单地图在我的应用程序的 div 中正确呈现。

可能值得一提的是，我正在使用 angularJS、angular-material（基于 flex 的布局）和 ui-router，因此 div 所在的页面是用户调用导航操作时加载状态的模板到该页面（例如，通过导航栏项目单击）。

我的状态模板文件非常简单：

<md-card>
    <div id='map' style="width: 500px; height: 500px;"></div>
</md-card>

在状态的控制器文件中，我有以下传单地图初始化代码：

this.map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);

当地图被渲染时，瓦片不会被限制在我的 div 中，它们会溢出：

我的dom结构可以在下面找到

我的 md-card 的父元素变为可滚动的，所以当我向下滚动时，我也开始看到其他图块：

我最初的想法可能是我试图在 div 有时间渲染之前过早地渲染地图。因此，我尝试在超时（2 秒）中包装我的地图初始化代码，我确实看到我的白色 md 卡在加载状态时首先出现，然后在 2 秒延迟后出现图块，但它们再次显示为我的截图。

我唯一能想到的另一件事是 flex 的使用可能会产生影响，但是我在保存我的地图的 div 上指定了明确的高度和宽度，所以我原以为地图会遵守那个大小。

任何人都可以就这里发生的事情提供任何建议\帮助吗？

谢谢

Answer 1

Leaflet CSS 文件丢失的常见症状