我很难在我的应用程序中获取一个传单地图以在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卡的父元素变为可滚动的,因此当我向下滚动时,我也开始看到其他图块:
我最初的想法也许是在div有时间渲染之前,我试图过早渲染地图。因此,我尝试将我的地图初始化代码包装在一个超时(2秒)中,并且确实看到我的白色md卡在加载状态时首先显示,然后在2秒的延迟后出现图块,但按照我的截图。
我唯一想到的另一件事可能是flex的使用产生了效果,但是我在保存地图的div上指定了明确的高度和宽度,因此我本来以为地图会遵循该大小。
任何人都可以对这里发生的事情提供任何建议\帮助吗?
谢谢
缺少Leaflet CSS文件的常见症状
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句