【问题标题】:How can I hide infowindow on markers which are inside marker cluster如何在标记簇内的标记上隐藏信息窗口
【发布时间】:2015-06-07 13:13:30
【问题描述】:

我的标记很少有 infowindow 和 markerclusters。我想在标记成为地图中标记簇的一部分时隐藏标记的信息窗口,并在它们实际单独显示而不是在群集中显示时显示 tem。

标记和信息窗口的代码类似于:

    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);

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

【问题讨论】:

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


    【解决方案1】:

    观察标记的map_changed-事件。当标记的map-属性为空时,关闭信息窗口,否则打开。

           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>

    【讨论】:

    • 谢谢。我已将您的概念用于不同的事件,并且效果很好。再次非常感谢
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-21
    • 2016-07-09
    • 1970-01-01
    • 2013-03-03
    • 1970-01-01
    相关资源
    最近更新 更多