如何在 Google Maps API v3 中设置标记的 z-index

Posted 2023-02-23

【中文标题】如何在 Google Maps API v3 中设置标记的 z-index

【英文标题】：How do I set the z-index of a marker in Google Maps API v3

【发布时间】：2012-02-19 17:25:19

【问题描述】：

谁能解释使用 Google Maps API（第 3 版）为标记设置 z-index 的确切语法？

【参考方案1】：

在MarkerOptions：

var marker = new google.maps.Marker( 
    ....
    zIndex: 100 
);

或通过Marker setter：

marker.setZIndex(100);

【讨论】：

100 是离用户更近还是更远？

对于不熟悉 z-index 的人来说，它是高度分层的 CSS 属性。它与距离无关，也不特定于谷歌地图。当多个标记重叠时，我正在使用它使特定类型的标记绘制在其他标记的“顶部”。

@Phlip：值（100）是相对的，而不是绝对的。值为 100 的项目似乎是具有较高值的​​“下方”项目（这将看起来更接近用户），但“上方”具有较低值的项目。

【参考方案2】：

zIndex 实际上是一个相对术语。例如，如果您有两个标记，marker1 和marker2，并且marker1 的zIndex 为100，marker2 的zIndex 为101：这意味着marker2 在堆栈中高于marker1。因此，marker2 将位于顶部或 marker1 上，并且在用户面前。

您可以使用以下方法设置 z-index：

var marker=new google.maps.Marker(
    position: myCenter,
    map: map,
    zIndex: 100
);

如果您之前创建了一个标记，那么只需使用：

marker.setZIndex(101);