Css 谷歌地图API V3 Z索引不工作_Css_Google Maps Api 3_Z Index

Css 谷歌地图API V3 Z索引不工作

css google-maps-api-3

Css 谷歌地图API V3 Z索引不工作,css,google-maps-api-3,z-index,Css,Google Maps Api 3,Z Index,我有一张地图，上面有大约20个标记，代表祖先的出生地。标记是从XML创建的。我希望后面的几代人在前面，前面的几代人在后面，但谷歌地图默认为最南边的标记。最简单的代码形式如下所示： <!DOCTYPE html > <head> <link rel="stylesheet" href="css/style.css" type="text/css"> <script src="https://maps.googleapis.com/maps/api/js?k

我有一张地图，上面有大约20个标记，代表祖先的出生地。标记是从XML创建的。我希望后面的几代人在前面，前面的几代人在后面，但谷歌地图默认为最南边的标记。最简单的代码形式如下所示：

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

在这个主题上有很多变化，但都没有成功

这让我发疯。据我所知，我遵循了谷歌地图参考指南，但我所做的任何事情都不会改变标记的显示方式。

zIndex

应为Number类型，但

getAttribute（）

始终返回字符串

在分配zIndex之前，将字符串转换为数字

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

数小时的挫折感在30秒内解决。谢谢你，莫勒博士。

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