如何隱藏內部標記羣集中的標記infowindow

Question

我有幾個標記有infowindow和markerclusters。當他們成爲地圖中標記集羣的一部分時，我想隱藏標記的infoWindow，並在它們實際單獨顯示而不是集羣中時顯示它們。

用於標記和信息窗口的代碼是一樣的東西：

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map, 
    ...   
    }); 



var myOptions = { 
     ....... 
}; 

infowindow = new InfoBox(myOptions); 
infowindow.open(map, marker); 

markers.push(marker); 

然後，我有標記集羣

var markerCluster = new MarkerClusterer(map, markers,markerClustererOptions); 

有人可以提供對如何處理這個

Answer 1

代碼/建議/鏈接觀察標記的事件map_changed。當標記的map屬性爲null時，關閉infowindow，否則將其打開。

 google.maps.event.addListener(marker,'map_changed',function(){ 
     if(this.getMap()){ 
      infowindow.open(this.getMap(),this); 
     } 
     else{ 
      infowindow.close(); 
     } 
     }); 

例子：

function initialize() { 
 

 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 2, 
 
    center: new google.maps.LatLng(0, 0), 
 

 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var markers = []; 
 
    for (var i = 0; i < 100; i++) { 
 
    (function(photo) { 
 
     var latLng = new google.maps.LatLng(photo.latitude, 
 
      photo.longitude), 
 
     marker = new google.maps.Marker({ 
 
      position: latLng 
 
     }); 
 
     console.log(photo) 
 
     markers.push(marker); 
 
     var infowindow = new InfoBox({ 
 
     content: '<img src="http://mw2.google.com/mw-panoramio/photos/thumbnail/' + photo.photo_id + '.jpg" />', 
 
     disableAutoPan: true, 
 
     closeBoxURL: "", 
 
     pane: "floatPane" 
 

 
     }); 
 

 
     google.maps.event.addListener(marker, 'map_changed', function() { 
 
     if (this.getMap()) { 
 
      infowindow.open(this.getMap(), this); 
 
     } else { 
 
      infowindow.close() 
 
     } 
 
     }); 
 

 

 
    }(data.photos[i])); 
 

 
    } 
 
    var markerCluster = new MarkerClusterer(map, markers); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
}

<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script> 
 
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script> 
 
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>