我有一张有很多标记的地图。所有这些标记都有一个InfoWindow。 使用Markers集群库(http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js),我可以获得单击时放大的集群。
某些标记具有完全相同的坐标,因此即使在达到最大变焦时它们也会变为一个簇。到目前为止,这一切都很好,除了我想在打开一个InfoWindow时单击群集时缩放时从不分割成标记。在这个InfoWindow中,我想根据它包含的标记显示信息。Google Maps InfoWindow on Clusters
这是我的代码到目前为止。它在InfoMark上可以正常工作,但在点击群集时不会显示InfoWindow。
function initialize(lat, lng) {
var myLatlng = new google.maps.LatLng(lat,lng);
var mapOptions = {
mapTypeControl: false,
center: myLatlng,
zoom: 14,
maxZonn:15
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, 'idle', function() {
getMarkers(map.getBounds());
});
};
function getMarkers(bounds){
var filter = build_filter();
var bounds = {
'swlat':bounds.getSouthWest().lat(),
'swlng':bounds.getSouthWest().lng(),
'nelat':bounds.getNorthEast().lat(),
'nelng':bounds.getNorthEast().lng()
};
data = {
'bounds': bounds
}
$.ajax({
type: "POST",
dataType: 'json',
async: false,
url: "<?=$x_url;?>",
data: data,
cache: true,
success: function (json) {
addMarkers2Map(json);
}
});
}
function addMarkers2Map(data){
$('#properties_counter').html(data.length);
var markers = [];
for (var i = 0; i < data.length; ++i) {
// set the marker position
var latLng = new google.maps.LatLng(data[i].lat, data[i].lng);
console.log(data[i].lat);
// drop the marker
var marker = new MarkerWithLabel({
position: latLng,
map: map,
labelContent: data[i].price,
labelAnchor: new google.maps.Point(27, 35),
title: data[i].title,
labelClass: "map-markers",
zIndex: i
// icon: ' '
});
markers.push(marker);
var infowindow = null;
buildInfoWindow(marker,map,data[i], i);
}
var markerCluster = new MarkerClusterer(map, markers);
google.maps.event.addListener(markerCluster, 'click', function() {
infowindow.open(map,markerCluster);
});
}
function buildInfoWindow(marker, map, data, index){
var strVar="";
strVar += "<img src=\""+data.main_photo+"\"><br>";
strVar += data.name+"<\/i> | "+data.age+" <i class=\"fa fa-prp\"><\/i> | "+data.gender+" <i class=\"fa fa-check\"><\/i>";
strVar += "<div class=\"avatar-list\">";
strVar += "<a href=\""+data.link+"\"><img class=\"avatar-photo-list\" src=\""+data.picture+"\"><\/a>";
strVar += "<\/div>";
strVar += "<div class=\"adress2\">"+data.city+"<\/div>";
strVar += "<\/a>";
var infowindow = new google.maps.InfoWindow({
content: strVar
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
我该如何做到这一点?
请提供证明此问题的[最小,完整,测试和可读示例](http://stackoverflow.com/help/mcve)。您可能需要查看[MarkerClustererPlus](http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/) – geocodezip