传单地图未根据目标元素的尺寸调整大小
Leaflet map not sizing to dimensions of target element
我很难让传单地图在我的应用程序中的 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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map);
渲染地图时,图块不会受限于我的 div,它们会溢出:
我的 dom 结构可以在下面找到
我的 md-card 的父元素变得可滚动,所以当我向下滚动时,我也开始看到其他图块:
我最初的想法可能是我在 div 有时间渲染之前过早地尝试渲染地图。因此,我尝试在超时(2 秒)内包装我的地图初始化代码,并且我确实看到我的白色 md-card 在加载状态时首先出现,然后在 2 秒延迟后出现瓷砖,但它们再次出现我的截图。
我唯一能想到的另一件事是 flex 的使用可能会产生影响,但是我在 div 持有我的地图时指定了明确的高度和宽度,所以我会想到地图会坚持那个尺寸。
任何人都可以提供任何 suggestions\help 关于这里可能发生的事情吗?
谢谢
缺少 Leaflet CSS 文件的常见症状
我很难让传单地图在我的应用程序中的 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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map);
渲染地图时,图块不会受限于我的 div,它们会溢出:
我的 dom 结构可以在下面找到
我的 md-card 的父元素变得可滚动,所以当我向下滚动时,我也开始看到其他图块:
我最初的想法可能是我在 div 有时间渲染之前过早地尝试渲染地图。因此,我尝试在超时(2 秒)内包装我的地图初始化代码,并且我确实看到我的白色 md-card 在加载状态时首先出现,然后在 2 秒延迟后出现瓷砖,但它们再次出现我的截图。
我唯一能想到的另一件事是 flex 的使用可能会产生影响,但是我在 div 持有我的地图时指定了明确的高度和宽度,所以我会想到地图会坚持那个尺寸。
任何人都可以提供任何 suggestions\help 关于这里可能发生的事情吗?
谢谢
缺少 Leaflet CSS 文件的常见症状