javascript - map 上元素的 Bootstrap 和 map 设计

Question

我正在使用 Bootstrap 和 map API。 Map Api 使用 %100 高度。我想在 map 上显示带有 Bootstrap 的创建元素。 Jsfiddle在这里。

我想这样显示。

Answer 1

您必须用另一个 div 包装您的 ma​​pDiv，使“包装器”和“面板”绝对 这样您的面板就可以在 map 上方飞行，您可以将面板的位置设置为顶部、左侧、底部或右侧。

wrapperMap:

<div class="wrapperMap">
    <div id="mapDiv"></div>
</div>

<div id="fly" class="panel panel-warning">
     <div class="panel-heading">
         <h3 class="panel-title">Layers Not Found</h3>
     </div>
     <div class="panel-body">Sorry, I could not list layers!</div>
</div>

CSS:

#fly {
    position: absolute;
    clear: none;
    left: 20%;
}
.wrapperMap {
    height: 100%;
    width: 100%;
    position: absolute;
    clear: none;
}

看看这个JS Fiddle