单张地图未调整为目标元素的尺寸 [英] Leaflet map not sizing to dimensions of target element

问题描述

我很难获得要在应用程序中的div内部正确呈现的传单地图.

I am having a hard time getting a leaflet map to render correctly inside a div in my application.

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

It's probably worth mentioning I am using angularJS, angular-material (with flex based layouts) and ui-router, so the page that the div lives on is a template for a state being loaded when the user invokes an action to navigate to that page (e.g. through a navbar item click).

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

My template file for the state is pretty simple:

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

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

In the controller file for the state, I have the following leaflet map initialisation code in place:

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上，它们会溢出:

When the map is rendered, the tiles do not get constrained to my div, they spill out:

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

My dom structure can be found below

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

The parent element for my md-card becomes scrollable, so when I scroll down I start seeing other tiles too:

我最初的想法也许是在div有时间渲染之前，我试图过早渲染地图.因此，我尝试将我的地图初始化代码包装在一个超时(2秒)中，并且确实看到我的白色md卡在加载状态后首先显示，然后在2秒的延迟后出现图块，但按照我的屏幕截图.

My initial thoughts were perhaps I have been trying to render the map too soon, before the div has had time to render. I therefore tried wrapping my map initialisation code in a timeout (2 seconds) and I do see my white md-card show up first when the state is loaded, and then the tiles appear after the 2 second delay, but again they appear as per my screenshots.

我唯一想到的另一件事也许是使用flex产生了效果，但是我在保存地图的div上指定了显式的高度和宽度，因此我本来以为地图会保持该大小.

The only other thing I can think of is perhaps the usage of flex is having an effect, I am however specifying explicit height and widths on the div holding my map, so I would have thought the map would adhere to that size.

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

Can anyone offer any suggestions\help as to what could be going on here?

谢谢

推荐答案

缺少Leaflet CSS文件的常见症状

Usual symptom of missing Leaflet CSS file

这篇关于单张地图未调整为目标元素的尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！