flex 容器内的传单地图不显示

Question

我想在 flex 容器中显示传单地图，以便在显示/隐藏父元素中的其他（最初隐藏的）元素时轻松调整地图的大小。这就是我正在做的事情

• 我设置了一个 flex 容器，其中堆叠了两个 div 元素 - 默认情况下占据相同的高度
• 下半部分包含一张图片
• 上半部分包含必须在动态添加的 div 元素中创建的实际地图。
• 还有第三个 flex div 元素 infoBox，它最初是隐藏的。最终的想法是，当在 infoBox 上设置 display:flex 时，它会导致其他内容缩小（理想情况下会消失，但看起来 Flexbox 不会这样做）

这个想法目前失败的地方是我根本无法首先显示地图。在 Chrome 开发者控制台中检查添加的 imap 元素会发现它的高度停留在 0。

这几乎肯定与我使用的是弹性容器而不是固定高度容器有关。但是，我无法找到解决此问题的方法。我怎样才能让它按预期工作？

var imap = document.createElement('div');
imap.id = 'imap';

document.getElementById('mapBox').appendChild(imap);
 var lmap = L.map('imap',{center:[51.510067,-0.133869],zoom:10});

#container
{
 display:flex;
 flex-direction:column-reverse;
 min-height:400px;
}

#picBox
{
 flex:5;
 background-image:url(https://placeimg.com/1000/1000/tech);
 background-size:cover;
 background-repeat:no-repeat;
 background-position:center;
}

#mapBox
{
 flex:5;
 position:relative;
 border:1px solid red;
}

#infoBox
{
 flex:20;
 border:1px solid blue;
 display:none;
}
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet"/>
<div id='container'>
<div id='infoBox'>Stackoverflow is really cool!</div>
<div id='picBox'>&nbsp;</div>
<div id='mapBox'>

</div>
</div>

Answer 1

这里的主要问题是您动态创建的div，id 为imap。

它呈现为标准div，占据其父级的全宽，但由于它没有任何内容（地图呈现为绝对定位元素），它的高度为0。

您可以将mapBox 设为弹性容器，因此您使用脚本创建的imap 元素将拉伸并填充其父元素。

堆栈sn-p

var imap = document.createElement('div');
imap.id = 'imap';

document.getElementById('mapBox').appendChild(imap);
 var lmap = L.map('imap',{center:[51.510067,-0.133869],zoom:10});

#container
{
 display:flex;
 flex-direction:column-reverse;
 min-height:400px;
}

#picBox
{
 flex:5;
 background-image:url(https://placeimg.com/1000/1000/tech);
 background-size:cover;
 background-repeat:no-repeat;
 background-position:center;
}

#mapBox
{
 flex:5;
 position:relative;
 border:1px solid red;
 
 display: flex;                    /*  added  */
}

#mapBox > div
{
 flex:1;                       /*  added, fill width of parent  */
 /*align-items: stretch;           is default, fill height of parent  */
}

#infoBox
{
 flex:20;
 border:1px solid blue;
 display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet"/>
<div id='container'>
<div id='infoBox'>Stackoverflow is really cool!</div>
<div id='picBox'>&nbsp;</div>
<div id='mapBox'>

</div>
</div>

---

或者更改脚本，因此地图将使用mapBox 元素。

堆栈sn-p

 var lmap = L.map('mapBox',{center:[51.510067,-0.133869],zoom:10});

#container
{
 display:flex;
 flex-direction:column-reverse;
 min-height:400px;
}

#picBox
{
 flex:5;
 background-image:url(https://placeimg.com/1000/1000/tech);
 background-size:cover;
 background-repeat:no-repeat;
 background-position:center;
}

#mapBox
{
 flex:5;
 position:relative;
 border:1px solid red; 
}

#infoBox
{
 flex:20;
 border:1px solid blue;
 display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet"/>
<div id='container'>
<div id='infoBox'>Stackoverflow is really cool!</div>
<div id='picBox'>&nbsp;</div>
<div id='mapBox'>

</div>
</div>

Answer 2

如果您的地图最初是隐藏的，并且它的容器元素在一段时间后（或在一些交互之后）显示，那么您可能需要在发生这种情况时运行 map.invalidateSize()。

参见例如Leaflet map not displayed properly inside tabbed panel.