指定 Google Map Markers 的 z-index答案

【问题标题】：Specify the z-index of Google Map Markers指定 Google Map Markers 的 z-index
【发布时间】：2012-12-11 15:21:37
【问题描述】：

我有一个谷歌地图，里面有很多使用 websockets 添加的标记。我正在使用基于数据可用性的自定义标记图像。我想确保最新的标记位于地图中所有其他元素的顶部。

我该怎么做？

代码：

circleIcon = {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: "blue",
    fillOpacity: 1,
    scale: 2,
    strokeColor: "red",
    strokeWeight: 10
};

coordinates = image[2].split(',');

pin=new google.maps.LatLng(coordinates[0], coordinates[1]);

if(marker) {
    marker.setMap(null);
}

if(image[0] != "NOP") {
    var markerIcon = circleIcon;
} else {
    var markerIcon = image_car_icon;
}

marker=new google.maps.Marker({
    position:pin,
    icon:markerIcon
});

marker.setMap(map);

map.setCenter(marker.getPosition());

更新

我正在使用 jquery 来更新 InfoWindow 的 z-index，例如：

popup = new google.maps.InfoWindow({
    content:'<image id="pin_' + pin_count + '" src="data:image/png;base64,' + image[1] +'"/>',
});

popup.open(map, marker);

google.maps.event.addListener(popup, 'domready', function() {
    console.log("DOM READY...........................");

    // Bring latest Image to top            
    e = $('#pin_' + pin_count).parent().parent().parent().parent();
    e.css({
        'z-index' : 99999 + pin_count,
    });
});

也许这就是标记显示在信息窗口后面的原因。我尝试使用 zIndex 进行更新，但标记仍显示在 InfoWindow 后面：

marker=new google.maps.Marker({
    position:pin,
    zIndex: 9999999 + pin_count,
    icon:markerIcon
});

更新

示例代码。我希望“绿色圆圈”图标标记位于“图钉”图标标记后面。

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>

    var london = new google.maps.LatLng(51.508742,-0.120850);

    function initialize()
    {
        var pin1=new google.maps.LatLng(51.508742, -0.120850);
        var pin2=new google.maps.LatLng(51.508642, -0.120850);

        var mapProp = {
          center:pin1,
          zoom:17,
          disableDefaultUI:true,
          mapTypeId:google.maps.MapTypeId.ROADMAP
          };

        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

        var marker=new google.maps.Marker({
          position:pin2,
          zIndex:99999999
          });

        marker.setMap(map);

        var infowindow = new google.maps.InfoWindow({
          content:"Hello World!"
          });

         infowindow.open(map,marker);

        circleIcon = {
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: "blue",
            fillOpacity: 1,
            scale: 2,
            strokeColor: "green",
            strokeWeight: 10
        };

        var marker2=new google.maps.Marker({
          position:pin1,
          icon:circleIcon,
          zIndex:99999
          });

        marker2.setMap(map);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
</html>

【问题讨论】：

你查看过 API 中的MAX_ZINDEX 吗？添加标记时应该很容易增加它@987654321@
我可能添加的 InfoWindows 怎么样？ MAX_ZINDEX 是否也将标记放在上面？
我试过 mark.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);但即使我设置了更大的 z-index，MAX_ZINDEX 的值也不会改变。
自从我使用 API 以来已经有一段时间了：查看标记选项之一是：zIndex。增加
@charlietfl 它不起作用。标记出现在 InfoWINdow 后面。

标签： javascript jquery html google-maps

【解决方案1】：

您必须结合 zIndex 选项将标记选项“优化”设置为 false。

var marker=new google.maps.Marker({
      position:pin2,
      optimized: false,
      zIndex:99999999
});

这应该可以解决您的问题。

【讨论】：

感谢您的精彩提示。 “优化：假”是关键。
zIndex 为我工作。不需要优化道具。对于一组标记，我在每次迭代时将 zIndex 设置为 Date.now()，以保持最后一个在顶部。
那个 Date.now() 建议是个好主意。我一直在寻找一种方法来确保某个信息窗口始终位于顶部，这肯定会做到。
我需要optimized: false，可能是因为我使用了一些需要opmtimized: false的svg图标？

【解决方案2】：

默认情况下，地图上较低的标记会使 z-index 较高，因此它们从上到下明显堆叠

您可以为标记设置zIndex 选项。您只需要在添加标记并将其添加到标记选项对象时创建一个增量 zIndex 计数器：

marker=new google.maps.Marker({
    position:pin,
    icon:markerIcon,
    zIndex: counterValue
});

我不太确定基本起始值需要是什么

【讨论】：

我试过了，对我没用...我已经更新了问题。
你能创建一些标记数据并在 jsfiddle.net 中放一个演示吗？
我的全部数据都来自服务器，所以创建一个 jsfiddle 会很困难。
只是一些简单的东西，几个标记足够靠近以查看您正在使用的问题和代码。只需要大约 3 或 4 个标记
jsfiddle 好像有一些问题，我已经在问题本身中添加了示例代码。

【解决方案3】：

问题解决了。只需将 zValue 设置为 999（我猜更高的值会将它带到顶部），它应该会出现在顶部。我猜默认是999以下：

var zValue;

if (someCondition) {
    zValue = 999;
}

var marker = new google.maps.Marker({
    map: map,
    position: {lat: lat, lng: lng},
    title: titleString,
    icon: image,
    zIndex: zValue
});

【讨论】：

它将为所有窗口分配 999，这没有任何意义。

【解决方案4】：

请注意，正如 the google map documentation 中所说，圆的 z-index 将与其他多边形的 z-index 进行比较，而不是与标记的 z-index 进行比较。

【讨论】：