使用标记群集时从地图标记中删除标签

Removing labels from map markers when using markercluster

本文关键字:图标 删除 标签 地图 群集      更新时间:2023-09-26

我们使用自定义标签代码在Google地图中添加带有标签的标记,并使用MarkerCluster库对标记进行聚类。

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

还要隐藏"标签"和标记。我一直在尝试查找在标记群集中添加或删除标签的位置.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);
}

谁能告诉我我应该在标记群集中更改什么.js以使其也删除标签?

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

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

在集群中添加或删除标记后,映射属性将更改。该脚本会将labelmap设置为markermap(它与label.bindTo('map',marker,'map')基本相同,但似乎bindTo在这里不起作用)。