指定 Google Map Markers 的 z-index

Question

I am having a Google Map with lots of markers added using websockets.我有一个谷歌 Map，其中使用 websockets 添加了很多标记。 I am using custom marker images based on data availability.我正在使用基于数据可用性的自定义标记图像。 I want to make sure the newest marker stays on top of all other elements in the map.我想确保最新的标记位于 map 中所有其他元素的顶部。

How do I do this?我该怎么做呢？

Code:代码：

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());

Update更新

I am using jquery to update the z-index of the InfoWindow, like:我正在使用 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,
    });
});

Maybe that's why the marker shows behind the InfoWindow.也许这就是为什么标记显示在 InfoWindow 后面的原因。 I tried updating using zIndex, but the marker still shows behind the InfoWindow:我尝试使用 zIndex 进行更新，但标记仍然显示在 InfoWindow 后面：

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

Update更新

Sample code.示例代码。 I expect the "green circle" icon marker to be behind the "pin" icon marker.我希望“绿色圆圈”图标标记位于“图钉”图标标记的后面。

<!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>

Answer 1

You have to set the marker option "optimized" to false in combination with the zIndex option. 您必须结合zIndex选项将标记选项“optimized”设置为false。

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

This should solve your problem. 这应该可以解决您的问题。

Answer 2

By default map will make z-index higher for markers lower on the map so they visibly stack top to bottom 默认情况下，地图会使地图上较低的标记的z-index更高，因此它们从上到下可见

You can set zIndex option for a marker. 您可以为标记设置zIndex选项。 You would just need to create a increment zIndex counter as you add markers and add that to the marker options object: 您只需要在添加标记时创建增量zIndex计数器并将其添加到标记选项对象：

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

I'm not quite sure what the base start value needs to be 我不太确定基本起始值需要什么

Answer 3

Problem solved. 问题解决了。 Just set the zValue to 999 (I'm guessing higher will bring it more to the top) and it should come to the top. 只需将zValue设置为999（我猜更高会使它更多地位于顶部）它应该会出现在顶部。 I guess the default is below 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
});

Answer 4

请注意，正如谷歌地图文档中所述，圆圈的z-index将与其他多边形的z-index进行比较，而不是与标记的z-index进行比较。

Answer 5

For existing markers, marker.setZIndex(value) must be used.对于现有标记，必须使用marker.setZIndex(value) 。 marker.getZIndex() can be used to get the current z-index. marker.getZIndex()可用于获取当前的 z-index。

指定 Google Map Markers 的 z-index

问题描述

5 个解决方案

解决方案1
45 2015-09-17 12:36:13

解决方案2
27 已采纳 2012-12-25 22:30:08

解决方案3
4 2015-01-22 20:41:46

解决方案4
1 2013-02-19 13:10:10

解决方案5
1 2022-03-08 23:26:48

指定 Google Map Markers 的 z-index

问题描述

5 个解决方案

解决方案1 45 2015-09-17 12:36:13

解决方案2 27 已采纳 2012-12-25 22:30:08

解决方案3 4 2015-01-22 20:41:46

解决方案4 1 2013-02-19 13:10:10

解决方案5 1 2022-03-08 23:26:48

解决方案1
45 2015-09-17 12:36:13

解决方案2
27 已采纳 2012-12-25 22:30:08

解决方案3
4 2015-01-22 20:41:46

解决方案4
1 2013-02-19 13:10:10

解决方案5
1 2022-03-08 23:26:48