我有一张带有很多标记的地图。所有这些标记都有一个信息窗口。
使用标记簇库，(http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js）我得到的集群在单击时会放大。
有些标记具有完全相同的坐标，因此即使我达到最大缩放，它们也会变成一个簇。到目前为止一切都很好，除了我还想在单击群集时打开一个信息窗口，该信息窗口在缩放时永远不会拆分为标记。在此信息窗口中，我想根据它包含的标记显示信息。
这是我到目前为止的代码。它与标记上的信息窗口配合良好，但单击群集时不显示信息窗口。
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);
});
}
我怎样才能实现这个目标？
将“clusterclick”侦听器添加到 MarkerClusterer，触发该事件时打开信息窗口。
概念证明小提琴
代码片段：
var gm_map;
var markerArray = [];
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var marker, i;
var options_googlemaps = {
minZoom: 4,
zoom: 18,
center: new google.maps.LatLng(59.328631, 13.485688),
maxZoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
gm_map = new google.maps.Map(document.getElementById('google-maps'), options_googlemaps);
var options_markerclusterer = {
gridSize: 20,
maxZoom: 18,
zoomOnClick: false,
imagePath: 'https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/images/m' // was 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
};
var markerCluster = new MarkerClusterer(gm_map, clusterMarkers, options_markerclusterer);
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var markers = cluster.getMarkers();
var array = [];
var num = 0;
for (i = 0; i < markers.length; i++) {
num++;
array.push(markers[i].getTitle() + '<br>');
}
if (gm_map.getZoom() <= markerCluster.getMaxZoom()) {
infoWindow.setContent(markers.length + " markers<br>" + array);
infoWindow.setPosition(cluster.getCenter());
infoWindow.open(gm_map);
}
});
for (i = 0; i < clusterMarkers.length; i++) {
var marker = clusterMarkers[i];
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
infoWindow.setContent(this.getTitle());
infoWindow.open(gm_map, this);
}
})(marker));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
var clusterMarkers = [
new google.maps.Marker({
position: new google.maps.LatLng(59.381059, 13.504026),
map: gm_map,
title: "P1220214 1.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.338683, 13.492057),
map: gm_map,
title: "P1220214 2.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.340715, 13.49631),
map: gm_map,
title: "P1220214 3.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.327232, 13.487384),
map: gm_map,
title: "P1220214 4.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.379034, 13.516566),
map: gm_map,
title: "P1220214 5.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328631, 13.485688),
map: gm_map,
title: "P1220214 6.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328657, 13.485591),
map: gm_map,
title: "P1220214 7.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328501, 13.485782),
map: gm_map,
title: "P1220214 8.JPG"
})
].photo-map {
background-color: #222222;
height: 500px;
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<!-- was https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js -->
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/src/markerclusterer.js"></script>
<div class="photo-map" id="google-maps"></div>