如何隐藏在标记簇内的标记上的infowindow

时间:2015-04-02 14:24:31

标签: javascript google-maps google-maps-api-3 infowindow markerclusterer

我几乎没有标记有infowindow和标记簇。我想隐藏标记的infoWindow,当它们成为地图中标记簇的一部分时,并在它们实际单独展示而不是在群集中时显示tem。

标记和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);

有人可以提供有关如何处理此问题的代码/建议/链接

1 个答案:

答案 0 :(得分:4)

观察标记的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);
&#13;
html,
body,
#map {
  margin: 0;
  padding: 0;
  height: 100%;
}
&#13;
<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>
&#13;
&#13;
&#13;