google 地图的 Z-index

Question

我尝试在不使用 controlDiv 的情况下使用 z-index 在 google 地图中添加数据。

我有这个html:

<div #multimap style="width:100%;height:100%;">
</div>

<div style="z-index: -1;">
  <img src="../../../assets/warning-icons/driver/devicetheft.png" class="warning-images">
  <p>0</p>
</div>

第一个 div 参考 google 地图，第二个 div 包含图像和数字 0。

我尝试在 google 地图中添加此图像和编号。

我的尝试：

<div style="z-index: -1;">
  <img src="../../../assets/warning-icons/driver/devicetheft.png" class="warning-images">
  <p>0</p>
</div>

z-index=-1

<div style="z-index: 2;">
  <img src="../../../assets/warning-icons/driver/devicetheft.png" class="warning-images">
  <p>0</p>
</div>

但是没有任何效果！

可以将 z-index 与 google 地图一起使用吗？

Answer 1

您无需触摸 z-index 即可将元素放置在 google 地图的 iframe 之上。

你想要的是为你的第二个添加样式 div:

position: absolute;
top: 0;
left: 0;

然后您可以根据需要使用 top/left 样式来放置您的 div。考虑将您的块包裹在另一个具有绝对定位的 div 中，以使您的位置调整可预测且直接。

祝你好运

google 地图的 Z-index

Z-index with google maps

html

javascript

google-maps

z-index