MarkerClusterer: offset di ancoraggio per icone del cluster

Question

Sto cercando di compensare leggermente le icone dei cluster creati da Google Maps MarkerClusterer (V3). A parte la modifica del codice esistente, non riesco a trovare un modo per farlo. Qualcuno ha un'idea?

L'oggetto Styles in cui è possibile fornire un URL di immagine personalizzato accetta una proprietà di ancoraggio, ma questo è compensare il conteggio degli elementi del marcatore generato.

Grazie!

Answer 1

Potresti aggiungere un po 'di spazio trasparente a un lato del PNG dell'icona del cluster, in modo che la parte dell'icona che vorresti essere centrata sia effettivamente centrata anche nel tuo PNG. Ciò non dovrebbe aumentare il peso della tua immagine di più di qualche byte.

Answer 2

Il modo corretto per farlo è regolare il anchorIcon Proprietà come questa:

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

La risposta accettata non funziona abbastanza bene per me: l'aggiunta di spazio trasparente all'immagine dell'icona può cambiare il modo in cui gli eventi di clic e il bordo si comportano a causa della maggiore dimensione dell'oggetto.

Userei il anchorIcon proprietà tranne che è disponibile solo in Marker Clusterer Plus, non l'altro Clusterer marker plugin (che sto usando).

Per coloro che vogliono specificamente utilizzare il clusterer, puoi sovrascrivere ClusterIcon.prototype.getPosFromLatLng_. Il ClusterIcon L'oggetto è globale, quindi possiamo modificarlo a livello superiore di qualsiasi file di script senza scherzare con il codice sorgente del plug-in.

Questo ancorerà il marcatore in fondo all'icona:

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

Ho modificato il codice di MarcerCluster.js per supportare il parametro Anchortext modificando le seguenti due funzioni:

/**
 * 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 Properties non ha funzionato per me ... quindi ho fatto una specie di soluzione:

Io uso setCalculator() funzione per impostare il testo del cluster:

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

Quando sto impostando la proprietà del testo cluster con cui sto avvolgendo il valore <span>, qualcosa come questo:

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

Ora puoi controllare la posizione dell'etichetta del cluster con ".myclass":

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