所以我在使用gmaps.js和gmaps.js以及marker clusterer。在我的情况下,我可能有多个标记具有完全相同的位置,但实际上代表不同的数据。为了克服这个问题,我试图实施solution found here on SO - 特别是Nathan Colgate的解决方案。GoogleMaps - 带群集和多群集解决方案的gmaps.js
这个想法是当最大变焦达到集群时它将执行multiChoice
函数。我有这部分工作。我无法工作的是显示具有该功能的infoWindow。
我的目标是在此群集上显示的信息窗口点击来显示各标志(信息特别是每个标记的信息窗口的内容(这将有额外的细节具体到它)
JS:
//create the map
var map = new GMaps({
el: '#map_canvas_main',
lat: response.results[0].lat,
lng: response.results[0].lng,
zoom: 5,
maxZoom: 15,
panControl: false,
markerClusterer: function(map) {
markerCluster = new MarkerClusterer(map, [], {
title: 'Location Cluster',
maxZoom: 15
});
// onClick OVERRIDE
markerCluster.onClick = function(clickedClusterIcon) {
return multiChoice(clickedClusterIcon.cluster_);
}
return markerCluster;
}
});
//loop through array
for(var i = 0; i < response.results.length; i++)
{
//create marker image
var markerLoc = {
url: '/custom/plugins/gmaps/images/marker-red.png',
size: new google.maps.Size(24, 30), //size
origin: new google.maps.Point(0, 0), //origin point
anchor: google.maps.Point(9, 30) // offset point
};
//add marker
map.addMarker({
lat: response.results[i].lat,
lng: response.results[i].lng,
icon: markerLoc,
title: response.results[i].ip_address,
infoWindow: {
content: '<p>'+response.results[i].ip_address+'</p>'
//add more details later
}
});
}
//cluster function to do stuff
function multiChoice(clickedCluster)
{
//clusters markers
var markers = clickedCluster.getMarkers();
//console check
console.log(clickedCluster);
console.log(markers);
if (markers.length > 1)
{
//content of info window
var infowindow = new google.maps.InfoWindow({
content: ''+
'<p>'+markers.length+' = length</p>'+
'<p>testing blah blah</p>'
});
//show the window
//infowindow.open(??????????);
return false;
}
return true;
};