web-dev-qa-db-fra.com

Spécifiez le z-index des marqueurs Google Map

J'ai une carte Google Map avec de nombreux marqueurs ajoutés à l'aide de websockets. J'utilise des images de marqueurs personnalisées en fonction de la disponibilité des données. Je veux m'assurer que le marqueur le plus récent reste au-dessus de tous les autres éléments de la carte.

Comment puis-je faire cela?

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

Mise à jour

J'utilise jquery pour mettre à jour le z-index de l'InfoWindow, comme:

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,
    });
});

C'est peut-être pour cela que le marqueur apparaît derrière l'InfoWindow. J'ai essayé de mettre à jour en utilisant zIndex, mais le marqueur apparaît toujours derrière l'InfoWindow:

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

Mise à jour

Exemple de code. Je m'attends à ce que le marqueur d'icône "cercle vert" soit derrière le marqueur d'icône "épingle".

<!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>
javascriptjqueryhtmlhtml5google-maps
32
ATOzTOA

Par défaut, la carte augmentera l'indice z pour les marqueurs situés plus bas sur la carte afin qu'ils s'empilent visiblement de haut en bas

Vous pouvez définir l'option zIndex pour un marqueur. Vous auriez juste besoin de créer un compteur d'incrémentation zIndex lorsque vous ajoutez des marqueurs et ajoutez-le à l'objet d'options de marqueur:

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

Je ne suis pas sûr de la valeur de départ de base

27
charlietfl

Vous devez définir l'option de marqueur "optimisé" sur false en combinaison avec l'option zIndex.

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

Cela devrait résoudre votre problème.

45
K. Wils

Problème résolu. Réglez simplement la zValue sur 999 (je suppose que plus elle l'amènera plus haut) et elle devrait arriver en haut. Je suppose que la valeur par défaut est inférieure à 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
});
4
Eric Martin

Veillez à ce que, comme indiqué dans la documentation de google map le z-index d'un cercle soit comparé au z-index des autres polygones et non au z-index des marqueurs.

1
Txaku