Google Maps API V3 Z-Index funktioniert nicht

Ich habe eine Karte mit etwa 20 Markierungen darauf, die die Geburtsorte der Vorfahren darstellen. Die Markierungen werden aus XML erstellt. Ich möchte die späteren Generationen an der Front und die früheren Generationen hinter mir lassen, aber Google Maps setzt standardmäßig auf die südlichsten Marken voraus. In seiner einfachsten Form sieht der Code wie folgt:Google Maps API V3 Z-Index funktioniert nicht

<!DOCTYPE html > 
<head> 
<link rel="stylesheet" href="css/style.css" type="text/css"> 
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY" type="text/javascript"></script> 
<script type="text/javascript"> 
    //<![CDATA[ 
    var map = null; 

    var thisLatLng = {lat: 51, lng: -3.5}; 

    function load() { 
     var map = new google.maps.Map(document.getElementById("map"), { 
     center: thisLatLng, 
     zoom: 9, 
     mapTypeId: 'roadmap' 
     }); 

     // Change this depending on the name of your PHP file 
     downloadUrl("php-to-xml.php", function(data) { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) { 
      var name = markers[i].getAttribute("person"); 
      var gender = markers[i].getAttribute("gender"); 
      var z_index = markers[i].getAttribute("z_index"); 
      var lat = parseFloat(markers[i].getAttribute("lat")); 
      var lng = parseFloat(markers[i].getAttribute("lng")); 
      var point = new google.maps.LatLng(lat,lng); 
      var comment = markers[i].getAttribute("comment"); 
      var colour = markers[i].getAttribute("colour"); 
      var html = "<b>" + name + "</b> <br/>" + comment; 
      var icon = "images/" + gender + "_" + colour + ".png"; 
      var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 
      icon: icon, 
      optimized: false, 
      zIndex: z_index 
      }); 
     } 

     }); 

    } 


    function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

     request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
     } 
     }; 

     request.open('GET', url, true); 
     request.send(null); 
    } 

    function doNothing() {} 

    //]]> 
    </script> 

    </head> 

<body onload="load()"> 
<div id="map"></div> 
</body> 

</html>

Werte von z-Index variieren von 100 bis 200 in Inkrementen von 10, in Abhängigkeit von der Erzeugung. Allerdings habe ich auch versucht, sie 9100 bis 9200 und verschiedene andere Dinge zu machen.

Ich habe es vorgeschlagen, dass die Symbole eine CSS "Position" haben müssen, um Z-Index arbeiten zu lassen. Aber ich habe versucht

#map img[src^='/myfamilyroots/images'] {position:relative!important;}

und viele Variationen zu diesem Thema ohne Erfolg.

Das macht mich verrückt. Soweit ich sehen kann, habe ich die Referenz zu Google Maps gelesen, aber nichts, was ich tue, wird die Darstellung der Markierungen ändern.

Quelle

2016-04-19 TrapezeArtist

zIndex wird voraussichtlich vom Typ Nummer sein, aber getAttribute() gibt immer Zeichenfolgen zurück.

Konvertieren der Zeichenfolge in eine Zahl, bevor Sie die zIndex

var z_index = Number(markers[i].getAttribute("z_index"));

Quelle

2016-04-19 12:37:54

Untold Stunden der Frustration in 30 Sekunden gelöst zuweisen. Danke, Dr. Molle. – TrapezeArtist

Google Maps API V3 Z-Index funktioniert nicht

Antwort

Verwandte Themen