Google Maps API - 集群问题答案

【问题标题】：Google Maps API - Clustering IssueGoogle Maps API - 集群问题
【发布时间】：2018-04-16 15:44:16
【问题描述】：

我正在尝试将集群添加到我已经工作的地图中。但是，经过多次尝试，我无法理解为什么集群没有显示。我想知道代码中是否存在冲突，或者集群是否不能很好地与地图上的信息窗口或侦听器一起工作。如果可能的话，请您查看此代码，看看您是否注意到任何危险信号。非常感谢并提前感谢您！

    <script src="markerclusterer.js"></script>
<script>
  var customLabel = {
    community: {
      label: 'C'
    },
    building2: {
      label: 'A'
    }
  };

    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(40, -90), //This needs to be dynamic based on map location
      zoom: 11
    });
    var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP or XML file
      downloadUrl('all_marker_data.php', function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var id = markerElem.getAttribute('id');
          var name = markerElem.getAttribute('name');
          var address = markerElem.getAttribute('address');
          var type = markerElem.getAttribute('type');
          var dlink = markerElem.getAttribute('dlink');
          var comm_link = markerElem.getAttribute('comm_link');
          var target = markerElem.getAttribute('target');
          var point = new google.maps.LatLng(
              parseFloat(markerElem.getAttribute('lat')),
              parseFloat(markerElem.getAttribute('lng')));    
          var infowincontent = '<div>'+
                               '<h5>'+
                               '<a href="'+
                               comm_link+
                               '"'+
                               'target="'+
                               target+
                               '"'+
                               '>'+                                  
                               name+
                               '</a>'+
                               '</h5>'+
                               '</div>'+
                               '<div>'+                                  
                               '<p>'+
                               address+
                               '</p>'+
                               '</div>'+
                               '<div>'+                                                                      
                               '<a href="'+
                               dlink+
                               '" target="_new">'+
                               'Get Directions >></a>'+
                               '</div>'+
                               '</div>';
          var icon = customLabel[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            label: icon.label
          });
          marker.addListener('click', function() {
            infoWindow.setContent(infowincontent);
            infoWindow.open(map, marker);
          });
        });
      });
      var markerCluster = new MarkerClusterer(map, markers, {
        imagePath: 'images/m'});
    }

  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>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXX&callback=initMap">
</script>

如果有任何其他信息可以帮助回答这个问题，请告诉我，我会尽力提供这些信息。谢谢！

【问题讨论】：

标签： google-maps google-maps-api-3 google-maps-markers markerclusterer

【解决方案1】：

看起来像图像问题。在代码中，imagePath 指向名为“images”的文件夹，图标（集群）必须命名为“m1.png”、“m2.png”、...、“m5.png”。检查是否存在。

此链接可能会有所帮助：https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=es#agregar-un-agrupador-de-marcadores-en-clsteres。

问候！

【讨论】：