javascript - Angular-Leaflet-Directive - 地图在技术上正在渲染，但没有出现任何图块的问题。

Question

. . . 因为瓦片绝对位于高度为零的父容器中。

这是指令：https ://github.com/tombatossals/angular-leaflet-directive

我不确定寻求帮助的适当渠道，因为我正在处理一个相对较小的图书馆。我很确定我没有做错任何事情，因为带有地图缩放控件的灰色“画布”正在渲染，并且正在加载地图的图块（但实际上并未显示）。我可以通过为其父元素分配高度来强制显示瓷砖，但显然这不是 Leaflet 应该如何工作的。

我意识到这可能不是在这类事情上寻求帮助的最佳场所，所以我想知道，如果不出意外，是否有人可能知道我如何最好地寻求帮助。

Answer 1

我的 CSS 中的这个选择器是问题所在：

img {
  max-height: 100%;
  max-width: 100%;
}

解决方案只是让图像像往常一样在传单 map 的容器中呈现：

.leaflet-container img {
  max-height: none;
  max-width: none;
}

Answer 2

Hard to tell, without seeing any of your project's code. But it sounds like you need to apply a height to you #map container element. Check out one of the leaflet tutorials for possible css examples.

Something like the following would work:

#map{ height: 600px; width: 100% }

or

#map{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}