Question

我几个小时以来一直绞尽脑汁，似乎无法让它发挥作用。当这个代码运行时，地图上没有任何显示，我已经确认标记列表数组正在填充到DOM中。但是，地图上没有显示任何内容。任何帮助都会很棒！谢谢！

    <!DOCTYPE html >
   <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Marker Cluster Test</title>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map { height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        function initialize() {
      var center = new google.maps.LatLng(38.860479, -104.771461);
      var myOptions = {
        center: center,
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById('map'), myOptions);

      var markerlist = [];
    downloadUrl("phpsqlajax_genxml.php", function(data) {;
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var type = markers[i].getAttribute("type");
            var vehid = markers[i].getAttribute("vehid");
            var point = new google.maps.LatLng(
                markers[i].getAttribute("lat"),
                markers[i].getAttribute("lng"));
            var html = "<b>VehID:</b>"+vehid;
            var marker = new google.maps.Marker({position: point,});
          markerlist.push(marker);
        }
      });
      var mc = new MarkerClusterer(map, markerlist);
    }


    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(){
    }
   google.maps.event.addDomListener(window, 'load', initialize);
   </script>

   </head>

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

   </html>

Answer 1

在填充markerlist之前填充markerclusterer，需要在downloadUrl回调函数中执行：

downloadUrl("phpsqlajax_genxml.php", function(data) {;
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
        var type = markers[i].getAttribute("type");
        var vehid = markers[i].getAttribute("vehid");
        var point = new google.maps.LatLng(
            markers[i].getAttribute("lat"),
            markers[i].getAttribute("lng"));
        var html = "<b>VehID:</b>"+vehid;
        var marker = new google.maps.Marker({position: point,});
      markerlist.push(marker);
    }
    var mc = new MarkerClusterer(map, markerlist);
  });

Google Maps API群集无任何地图

1 个答案: