叠加在图像上的Google地图使图像消失了

Question

我在图像上叠加了一个Google地图，当页面加载时，Google地图本质上会导致图像消失。我正在使用bootstrap。我的html看起来像这样：

<div class="col-md-4">
  <div id="map-canvas">
    <img id="image-formatting" src="some_image.png" alt="image">
  </div>
</div>

这是相关的CSS：

#map-canvas {
  width: 100%;
  height: 280px;
  background-color: #CCC
}
.image-formatting {
  max-width: 100%;
  height: auto;
  opacity: 0.5;
  z-index: -1;
  position: absolute;
  margin-left: 65%;
}

我希望图像出现在地图后面。当我删除地图时，图像正是我想要的位置，在Div后面。一旦地图初始化，图像就会消失。

Answer 1

@ @dr.Molle在评论中所说，在初始化时，地图API将删除您的内容。它不需要任何图像。

只是一个建议，但是一种实现您之后的好方法是将地图容器放在带有背景图像的div上（请所有内联样式，这是一个快速而令人讨厌的例子）

<div style="background-image:url('http://lorempixel.com/1000/300/animals');height:300px;width:100%;">
  <div id="map-container" style="height:200px;width:500px;background-color:#663399;color:white;margin-left:auto;margin-right:auto;text-align:center;">I'm a map</div>
</div> 

现在，地图容器位于其自己的div中，您的图像将在地图后面说明它的位置。显然，这也伴随着弊端，但这是实现自己追求的一种方法。