javascript - 使用 markercluster 时从 map 标记中删除标签

Question

我们使用自定义标签代码在 Google map 中添加带有标签的标记，还使用 ​​MarkerCluster 库对标记进行聚类。

我们的问题是标记隐藏了，但标签仍然显示。我们需要修改http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js

同时隐藏“标签”和标记。我一直在尝试找到在 markercluster.js 中添加或删除标签的位置，但没有成功。

这是我们的标签代码:

    // Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
     // Initialization
     this.setValues(opt_options);

     // Here go the label styles
     var span = this.span_ = document.createElement('span');
     span.style.cssText = 'position: relative; left: -50%; top: -35px; ' +
                          'white-space: nowrap;color:#000000;' +
                          'padding: 2px;font-family: Arial; font-weight: bold;' +
                          'font-size: 12px;';

     var div = this.div_ = document.createElement('div');
     div.appendChild(span);
     div.style.cssText = 'position: absolute; display: none';
};

Label.prototype = new google.maps.OverlayView;

Label.prototype.onAdd = function() {
     var pane = this.getPanes().overlayImage;
     pane.appendChild(this.div_);

     // Ensures the label is redrawn if the text or position is changed.
     var me = this;
     this.listeners_ = [
          google.maps.event.addListener(this, 'position_changed',
               function() { me.draw(); }),
          google.maps.event.addListener(this, 'text_changed',
               function() { me.draw(); }),
          google.maps.event.addListener(this, 'zindex_changed',
               function() { me.draw(); })
     ];
};

// Implement onRemove
Label.prototype.onRemove = function() {
     this.div_.parentNode.removeChild(this.div_);

     // Label is removed from the map, stop updating its position/text.
     for (var i = 0, I = this.listeners_.length; i < I; ++i) {
          google.maps.event.removeListener(this.listeners_[i]);
     }
};

// Implement draw
Label.prototype.draw = function() {
     var projection = this.getProjection();
     var position = projection.fromLatLngToDivPixel(this.get('position'));
     var div = this.div_;
     div.style.left = position.x + 'px';
     div.style.top = position.y + 'px';
     div.style.display = 'block';
     div.style.zIndex = this.get('zIndex'); //ALLOW LABEL TO OVERLAY MARKER
     this.span_.innerHTML = this.get('text').toString();
};


function initialize() {

  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

     setMarkers(map, beaches);  


}

google.maps.event.addDomListener(window, 'load', initialize);

var markersArray = [];
var labelsArray = [];

var beaches = [
     ['Bondi Beach', -33.890542, 151.274856, 4],
     ['Cronulla Beach', -34.028249, 151.157507, 3],
     ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
     ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
     var image = new google.maps.MarkerImage('marker.png',
     new google.maps.Size(100, 39),
     new google.maps.Point(0,0),
     new google.maps.Point(50, 39));
    /* var shadow = new google.maps.MarkerImage('marker-panel.png',
          new google.maps.Size(37, 32),
          new google.maps.Point(0,0),
          new google.maps.Point(0, 32));*/
     var shape = {
          coord: [1, 1, 1, 20, 18, 20, 18 , 1],
          type: 'poly'
     };
     for (var i = 0; i < locations.length; i++) {
          var beach = locations[i];
          var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
          var marker = new google.maps.Marker({
               position: myLatLng,
               map: map,
               //shadow: shadow,
               icon: image,
               shape: shape,
               title: beach[0],
              zIndex: beach[3]
          });
          var label = new Label({
               map: map
          });
          label.set('zIndex', 1234);
          label.bindTo('position', marker, 'position');
          label.set('text', beach[0]);
          //label.bindTo('text', marker, 'position');
          markersArray.push(marker);
          labelsArray.push(label);

     }

     var markerCluster = new MarkerClusterer(map, markersArray);

}

任何人都可以告诉我我应该在 markercluster.js 中更改什么以使其也删除标签吗？

Answer 1

将此添加到 for 循环的末尾:

  (function(m,l){
    google.maps.event.addListener(m,'map_changed',function(){l.setMap(this.getMap());});
  })(marker,label)

当标记被添加到集群或从集群中删除时， map 属性将发生变化。该脚本会将 label 的 map 设置为 marker 的 map(它与 基本相同code>label.bindTo('map',marker,'map') ，但似乎 bindTo 在这里不起作用。