小册子地图没有调整到目标元素的尺寸

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文件的常见症状