GoogleMaps Markerclusterer InfoWindow 相同位置，集群从 Markers 获取内容

Question

我有问题，MarkerCluster 未定义来自 Markers 的内容。

我在同一地址（位置）使用 MarkerCluster gridSize: 1

如果按Cluster zoomOnClick:false，Cluster 必须getMarkers 内容

并打开信息窗口。但我得到 undefined undefined 。

我解决了这个问题

 google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
    var markers = cluster.getMarkers();

    var content = '';
    for (var i = 0; i < markers.length; i++) {
      var marker = markers[i];
      content += marker.name;
      content += ("<br>");
    }
    var infowindow = new google.maps.InfoWindow();
    infowindow.setPosition(cluster.getCenter());
    infowindow.close();
    infowindow.setContent(content);
    infowindow.open(map);
    google.maps.event.addListener(map, 'zoom_changed', function() {
      infowindow.close();
    });
  });

完整代码：

function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(55.7522200, 37.6155600),
          zoom: 11
        });

        var infoWindow = new google.maps.InfoWindow;

    var iconPurple = new google.maps.MarkerImage('mapimages/purple.svg', new google.maps.Size(33, 31));
    var iconBlue = new google.maps.MarkerImage('mapimages/blue.svg', new google.maps.Size(33, 31));
    var iconYellow = new google.maps.MarkerImage('mapimages/yellow.svg', new google.maps.Size(33, 31));
    var iconGreen = new google.maps.MarkerImage('mapimages/green.svg', new google.maps.Size(33, 31));
    var iconPink = new google.maps.MarkerImage('mapimages/pink.svg', new google.maps.Size(33, 31));
    var iconBrown = new google.maps.MarkerImage('mapimages/brown.svg', new google.maps.Size(33, 31));

    var customIcons = [];
    customIcons["room1"] = iconPurple;
    customIcons["room2"] = iconBlue;
    customIcons["room3"] = iconYellow;
    customIcons["room4"] = iconGreen;
    customIcons["room5"] = iconPink;
    customIcons["room6"] = iconBrown;   

var options = {
    gridSize: 1,
    zoomOnClick:false,
    imagePath: 'mapimages/m'
        };

          downloadUrl(markers.php', function(data) {

            var xml = data.responseXML;

             var markerArray  = [];

            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
                var name = markerElem.getAttribute("name");
              var address = markerElem.getAttribute("address");
              var metro = markerElem.getAttribute("metro");
              var type = markerElem.getAttribute("type"); 
              var date = markerElem.getAttribute("date");
              var status = markerElem.getAttribute("status");
              var inrequest = markerElem.getAttribute("inrequest");
              var phone = markerElem.getAttribute("phone");
              var message = markerElem.getAttribute("message");
              var area_room = markerElem.getAttribute("area_room");
              var price = markerElem.getAttribute("price");
              var floore = markerElem.getAttribute("floore");
              var floors = markerElem.getAttribute("floors");
              var rooms_furniture = markerElem.getAttribute("rooms_furniture");
              var kitchen_furniture = markerElem.getAttribute("kitchen_furniture");
              var repaint = markerElem.getAttribute("repaint");
              var comment = markerElem.getAttribute("comment");
              var distance = markerElem.getAttribute("distance");
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

               var html = "<h1>" + "м.&nbsp;" + metro + ",&nbsp;&nbsp;" + address + "</h1>" 
+ "<h2>" + phone + "&nbsp;" + name + "</h2>"
+ "<h3>" + type + "&nbsp;&nbsp;" + area_room + "&nbspм &nbsp;&nbsp;" + price + "&nbsp;р. &nbsp;&nbsp; этаж&nbsp;" + floore + "/" + floors + "</h3>"
+ "<p>" + rooms_furniture + "&nbsp;&nbsp;" + kitchen_furniture + "&nbsp;&nbsp;" + repaint + "</p>"
+ "<h5>" + distance + "&nbsp;&nbsp;" + comment + "&nbsp;" + message + "</h5>" + "<h6>" + date + "&nbsp;&nbsp;" + inrequest + "&nbsp;&nbsp;" + status + "</h6>";


              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: customIcons[type],
                  animation: google.maps.Animation.DROP
              });

             markerArray.push(marker);

              marker.addListener('click', function() {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
              });

            });

    var markerCluster = new MarkerClusterer(map, markerArray, options); 

     google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
    var markers = cluster.getMarkers();

    var content = '';
    for (var i = 0; i < markers.length; i++) {
      var marker = markers[i];
      content += marker.name;
      content += ("<br>");
    }
    var infowindow = new google.maps.InfoWindow();
    infowindow.setPosition(cluster.getCenter());
    infowindow.close();
    infowindow.setContent(content);
    infowindow.open(map);
    google.maps.event.addListener(map, 'zoom_changed', function() {
      infowindow.close();
    });
  });

          });

        }

 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);//right here
   }
 };
 request.open('GET', url, true);
 request.send(null);
}

      function doNothing() {}

enter image description here

Answer 1

MarkerClusterer 中的google.maps.Marker 对象与您解析以创建google.maps.Markers 的“标记”XML 元素不同。除非您创建一个，否则不会有 name 属性。

var marker = new google.maps.Marker({
  map: map,
  position: point,
  icon: customIcons[type],
  animation: google.maps.Animation.DROP,
  name: name // <-- add this
});

proof of concept fiddle