在 Google Maps API markerclusterer 中显示单个标记的数据答案

【问题标题】：Show data for individual marker in Google Maps API markerclusterer在 Google Maps API markerclusterer 中显示单个标记的数据
【发布时间】：2017-01-19 07:45:12
【问题描述】：

如何显示单个标记的数据？

当鼠标悬停在 Google Maps API markerclusterer 集群上时，我能够显示自定义数据，但不知道如何对单个标记执行相同操作（即，当您放大集群直到看到单个标记时)。

显示集群数据的代码是：

var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
  'chco=FFFFFF,008CFF,000000&ext=.png';
google.maps.event.addDomListener(window, 'load', initialize);

function refreshMap() {
    if (markerClusterer) {
      markerClusterer.clearMarkers();
    }
    var markers = [];
    var markerImage = new google.maps.MarkerImage(imageUrl,
      new google.maps.Size(24, 32));
    for (var i = 0; i < numItemsToShow; ++i) {
      var latLng = new google.maps.LatLng(itemsToShow[i].lat, itemsToShow[i].long);
      var marker = new google.maps.Marker({
       position: latLng,
       icon: markerImage
      });
      markers.push(marker);
    }
    var zoom = parseInt(document.getElementById('zoom').value, 10);
    var size = parseInt(document.getElementById('size').value, 10);
    var style = parseInt(document.getElementById('style').value, 10);
    zoom = zoom == -1 ? null : zoom;
    size = size == -1 ? null : size;
    style = style == -1 ? null: style;

    markerClusterer = new MarkerClusterer(map, markers, {
      maxZoom: zoom,
      gridSize: size,
      styles: styles[style]
    });

    // Respond to mouseover on marker cluster
    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(markerClusterer, 'mouseover', function (cluster) {
      // do something with this cluster ...
      infoWindow.setContent("Mouseover<br>"+cluster.getCenter().toUrlValue());
      infoWindow.setPosition(cluster.getCenter());
      infoWindow.open(map);
    });

    // HOW TO RESPOND TO MOUSEOVER ON INDIVIDUAL MARKER?
}

【问题讨论】：

标签： google-maps-api-3 markerclusterer

【解决方案1】：

为google.maps.Marker 对象添加点击监听器：

var latLng = new google.maps.LatLng(itemsToShow[i].lat, itemsToShow[i].long);
var marker = new google.maps.Marker({
 position: latLng,
 icon: markerImage
});
// slightly modified from Google Maps JS API v3 - Simple Multiple Marker Example
// http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example
google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(ItemsToShow[i].lat+","+itemsToShow[i].long);
      infowindow.open(map, marker);
    }
})(marker, i));

【讨论】：