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。 / p>

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

Stack snippet

＆＃13;

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});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

Stack snippet

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

Flex容器内的传单映射未显示

2 个答案: