谷歌地圖API V3 Z索引不工作

我有一個地圖上有大約20個標記代表祖先的出生地。標記是從XML創建的。我希望後面的前輩和後面的後代，但谷歌地圖默認爲最前面的南方標記。在其最簡單的形式的代碼看起來是這樣的：谷歌地圖API V3 Z索引不工作

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

z索引的值從100到200中的10個增量變化，這取決於生成。不過我也試過把它們製作成9100到9200，還有其他的東西。

我已經看到它建議，圖標需要有一個CSS「位置」，以使z索引工作。然而我試過

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

和許多變化，在那個主題沒有成功。

這讓我生氣。據我所知，我已經遵循了Google Maps參考指南，但我沒有做任何改變標記顯示的方式。

來源

2016-04-19 TrapezeArtist

zIndex預計爲Number類型，但getAttribute()始終返回字符串。

將字符串成一個號碼分配無奈的zIndex的

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

來源

2016-04-19 12:37:54

數不清的時間在三秒還原之前。謝謝莫爾博士。 – TrapezeArtist

谷歌地圖API V3 Z索引不工作

回答

相關問題