html - 如何在谷歌地图上显示 Bootstrap 列表

Question

我已经创建了一个 Google map 应用程序并使用了 UI Bootstrap 。我想在 map 上显示列表，但不能。 我更改了列表的 z-index 但没有用。我将列表 html 代码放入 map div 但没有用。这是 css 问题吗？

Answer 1

您不能在 map 容器中放置任何东西，它会在您初始化 map 时被 API 覆盖。

您可以:

• 将其放在文档中的其他位置，并通过 CSS 将其放置在 map 上
• 或者用它作为custom control的内容

CSS 定位示例:

将两者(map-container 和 list-group )放在一个公共(public)容器中，并将 container 的位置设置为 relative

<div style="position:relative;">
  <div id="map_canvas" style="height:300px;"></div>
  <ul class="list-group" style="">
    <li class="list-group-item active">item#1</li>
    <li class="list-group-item">item#2</li>        
    <li class="list-group-item">item#3</li>
  </ul>
</div>

列表组的 CSS(使用 margin 在 map 中应用列表组的填充):

.list-group{
  position:absolute;
  top:0;
  margin:20px;
}

演示:http://jsfiddle.net/doktormolle/x9uRB/