传单地图的大小不适合目标元素的尺寸 [英] Leaflet map not sizing to dimensions of target element

查看:29
本文介绍了传单地图的大小不适合目标元素的尺寸的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我很难让传单地图在我的应用程序的 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-card 的父元素变得可滚动,所以当我向下滚动时,我也开始看到其他图块:

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆