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);
});

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

1 个答案: