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

Question

我有一个叠加在图片上的谷歌地图，当页面加载时，谷歌地图基本上会导致图像消失。我正在使用bootstrap。我的HTML看起来像这样：

ON DUPLICATE KEY UPDATE

以下是相关的css：

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

我希望图片显示在地图后面。当我删除地图时，图像正好在我想要的地方，在div后面。初始化地图后，图像将消失。

Answer 1

正如@ Dr.Molle在评论中所说，Maps 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中，那么你的图像会在地图后面说出它的位置。显然，这也带来了缺点，但这是实现目标的一种方式。