Google Maps InfoWindow on Clusters

Question

我有一張有很多標記的地圖。所有這些標記都有一個InfoWindow。 使用Markers集羣庫（http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js），我可以獲得單擊時放大的集羣。
某些標記具有完全相同的座標，因此即使在達到最大變焦時它們也會變爲一個簇。到目前爲止，這一切都很好，除了我想在打開一個InfoWindow時單擊羣集時縮放時從不分割成標記。在這個InfoWindow中，我想根據它包含的標記顯示信息。

這是我的代碼到目前爲止。它在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>&nbsp;|&nbsp;"+data.age+"&nbsp;<i class=\"fa fa-prp\"><\/i>&nbsp;|&nbsp;"+data.gender+"&nbsp;<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); 
    }); 
} 

我該如何做到這一點？

Answer 1

我最終解決這個問題這樣，加入以下代碼：

var clusterOptions = { 
    zoomOnClick: false 
} 

markerCluster = new MarkerClusterer(map, markers, clusterOptions); 

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) { 
if (map.getZoom() < map.maxZoom){ 

    map.setCenter(cluster.center_); 

    map.setZoom(map.getZoom() + 2); 
} else { 

    var content = ''; 
    // Convert the coordinates to an MVCObject 
    var info = new google.maps.MVCObject; 
    info.set('position', cluster.center_); 
    //Get markers 
    var marks_in_cluster = cluster.getMarkers(); 

    console.log(marks_in_cluster); 

    for (var z = 0; z < marks_in_cluster.length; z++) { 
     content = makeClusterInfo(marks_in_cluster,z); 
    } 

    infowindow.close(); // closes previous open ifowindows 
    infowindow.setContent(content); 
    infowindow.open(map, info); 
    google.maps.event.addListener(map, 'zoom_changed', function() { 
     infowindow.close() 
    }); 
    } 
}); 

Answer 2

將一個「clusterclick」偵聽器添加到MarkerClusterer，當該事件被觸發時打開infowindow。

proof of concept fiddle

代碼片段：

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://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"></script> 
 
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> 
 

 
<div class="photo-map" id="google-maps"></div>