MarkerClusterer: Ankerversatz für Cluster -Symbole

Question

Ich versuche, Cluster -Symbole, die von Google Maps MarkerClusterer (V3) erstellt wurden, leicht auszugleichen. Ich habe nicht den vorhandenen Code geändert und kann keinen Weg finden, dies zu tun. Hat jemand eine Idee?

Das Styles -Objekt, in dem Sie eine benutzerdefinierte Bild -URL bereitstellen können, akzeptiert eine Ankereigenschaft. Dabei wird jedoch die Anzahl der generierten Marker -Elemente ausgeglichen.

Vielen Dank!

Answer 1

Sie können einer Seite des PNG Ihres Cluster -Symbols einen transparenten Raum hinzufügen, so dass der Teil des Symbols, den Sie zentriert haben möchten, tatsächlich auch in Ihrem PNG zentriert sind. Dies sollte das Gewicht Ihres Bildes nicht um mehr als wenige Bytes erhöhen.

Answer 2

Der richtige Weg, dies zu tun, besteht darin, die anzupassen anchorIcon Eigenschaft wie dieses:

var clusterStyles = [
{
    height: 64,
    width: 53,
    anchorIcon: [20, 140]
},
{
    height: 64,
    width: 53,
    anchorIcon: [20, 140]
},
{
    height: 64,
    width: 53,
    anchorIcon: [20, 140]
}
];

var mcOptions = {
    styles: clusterStyles
};

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

Answer 3

Die akzeptierte Antwort funktioniert für mich nicht gut genug. Das Hinzufügen von transparentem Platz zum Symbolbild kann die Art und Weise ändern, wie Klick- und Schwebereignisse aufgrund der erhöhten Größe des Objekts sich verhalten.

Ich würde das verwenden anchorIcon Eigentum außer es ist nur in erhältlich Marker Clusterer Plus, nicht der andere Marker -Clusterer Plugin (was ich verwende).

Für diejenigen, die speziell Marker -Clusterer verwenden möchten - können Sie überschreiben ClusterIcon.prototype.getPosFromLatLng_. Das ClusterIcon Das Objekt ist global, sodass wir es auf der obersten Ebene jeder Skriptdatei ändern können, ohne mit dem Quellcode des Plugins zu spielen.

Dadurch verankert sich der Marker am Boden des Symbols:

ClusterIcon.prototype.getPosFromLatLng_ = function (latlng) {
  var pos = this.getProjection().fromLatLngToDivPixel(latlng);
  pos.x -= parseInt(this.width_ / 2);
  pos.y -= parseInt(this.height_);
  return pos;
};

Answer 4

Ich habe den Code von marcerclusterer.js geändert, um den Anchortext -Parameter zu unterstützen, indem ich die folgenden zwei Funktionen geändert habe:

/**
 * Sets the icon to the the styles.
 */
ClusterIcon.prototype.useStyle = function() {
  var index = Math.max(0, this.sums_.index - 1);
  index = Math.min(this.styles_.length - 1, index);
  var style = this.styles_[index];
  this.url_ = style['url'];
  this.height_ = style['height'];
  this.width_ = style['width'];
  this.textColor_ = style['textColor'];
  this.anchor_ = style['anchor'];
  this.anchorText_ = style['anchorText']; //added to support anchorText parameter by Frane Poljak, Locastic
  this.textSize_ = style['textSize'];
  this.backgroundPosition_ = style['backgroundPosition'];
};


/**
 * Adding the cluster icon to the dom.
 * @ignore
 */
ClusterIcon.prototype.onAdd = function() {
  this.div_ = document.createElement('DIV');
  if (this.visible_) {
    var pos = this.getPosFromLatLng_(this.center_);
    this.div_.style.cssText = this.createCss(pos);

      ////added to support anchorText parameter by Frane Poljak, Locastic

      if (typeof this.anchorText_ === 'object' && typeof this.anchorText_[0] === 'number' && typeof this.anchorText_[1] === 'number') {
          this.div_.innerHTML = '<span style="position:relative;top:' + String(this.anchorText_[0]) + 'px;left:' + String(this.anchorText_[1]) + 'px;">' + this.sums_.text + '</span>'
      } else this.div_.innerHTML = this.sums_.text;
  } 

  var panes = this.getPanes();
  panes.overlayMouseTarget.appendChild(this.div_);

  var that = this;
  google.maps.event.addDomListener(this.div_, 'click', function() {
    that.triggerClusterClick();
  });
};

Answer 5

Anchor / Anchoricon / Anchortext -Eigenschaften funktionierten bei mir nicht ... also habe ich eine Art Problemumgehung gemacht:

ich benutze setCalculator() Funktion zum Festlegen des Clustertextes:

https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html

Wenn ich die Cluster -Texteigenschaft festlegt, wickle ich den Wert mit <span>, etwas wie das:

markerCluster.setCalculator(function (markers) {
   return {
      text: '<span class="myClass">' + value+ '</span>',
      index: index                   
   };
});

Jetzt können Sie die Cluster -Label -Position mit ".myclass" steuern:

span.myClass{
   position: relative;
   top: -15px;
   .....
}