MarkerclustererPlus - 将标记数组返回到集群信息窗口

Question

我正在使用Markerclustererplus 和 Google Maps API v3 来简化屏幕上标记的显示。

问题是我将在完全相同的位置有几个标记（应该是这样），并且我希望在单击群集时显示一个包含所有群集标记的信息窗口。

我在 StackOverflow 中尝试了几个代码和类似的问题，不幸的是我没有掌握 JS，无法解决这个问题。

标记被推入包含一些数据的数组中：

var marker = new google.maps.Marker({
position : latlng,
map      : map,
icon     : marker_image 
});

map.markers.push(marker);

当我单击一个孤立的标记时，信息窗口显示正常，带有该标记的标题和图像：

var infowindow = new google.maps.InfoWindow({
    content : $marker.attr('data-title') + '<img width="50" src="' + $marker.attr('data-image') + '">'
    });

google.maps.event.addListener(marker, 'click', function() {
    infowindow.open( map, marker );
    });

我希望发生的是，当点击一个集群时，会打开一个信息窗口，其中包含的所有标记都显示为相应的标题和图像（例如，反转集群操作）。

感谢您的帮助。

Answer 1

感谢here 中提供的示例，设法解决了这个问题。

如果有人感兴趣，这是我的做法：

首先，我已将标记添加到地图中，以获取来自 Wordpress 自定义帖子的几个自定义字段的数据属性：

function add_marker( $marker, map ) {
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    var marker_image = $marker.attr('data-marker');
    var marker_name = $marker.attr('data-title');
    var marker_userpicture = $marker.attr('data-image');
    var marker = new google.maps.Marker({
    position        : latlng,
    map             : map,
    icon            : marker_image,
    name            : marker_name,
    userpicture     : marker_userpicture
    });

map.markers.push(marker);

创建了 MarkerCluster：

var markerCluster = new MarkerClusterer(map, map.markers, mcOptions);

添加了一个单击事件侦听器，该侦听器从集群中获取标记及其数据，根据该数据创建信息窗口内容并最终打开信息窗口：

google.maps.event.addListener(markerCluster, 'click', function(cluster){
var content ='';
var clickedMarkers = cluster.getMarkers();

for (var i = 0; i < clickedMarkers.length; i++) {
    if(i==0) {
    var var_pos = clickedMarkers[i];
    }

    var clickedMarkersNames = clickedMarkers[i].name;
    var clickedMarkersPicture = clickedMarkers[i].userpicture;
    content +=clickedMarkersNames;
    content +=clickedMarkersPicture;
}

var infowindow = new google.maps.InfoWindow();
infowindow.setContent(content);
infowindow.open(map,var_pos);
});