MarkerClusterer: ancrage compensé pour les icônes de cluster

Question

Je suis en train d'icônes de cluster légèrement décalées créées par Google Maps MarkerClusterer (V3). Court de modifier le code existant, je ne peux pas trouver un moyen de le faire. Est-ce que quelqu'un a une idée?

Les Styles objet dans lequel vous pouvez fournir une URL d'image personnalisée accepte une propriété d'ancrage, mais est de compenser le nombre d'éléments de marqueur généré.

Merci!

Answer 1

Vous pouvez ajouter un peu d'espace transparent d'un côté de la PNG de l'icône de cluster, de sorte que la partie de l'icône que vous souhaitez être centré est en réalité aussi centré dans votre PNG. Cela ne devrait pas augmenter le poids de l'image par plus de quelques octets.

Answer 2

La bonne façon de le faire est d'ajuster la propriété anchorIcon comme ceci:

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 réponse acceptée ne fonctionne pas suffisamment bien pour moi -. Ajouter de l'espace transparent à l'image de l'icône peut changer les événements de clic et de vol stationnaire en raison de comportement des augmentation de la taille de l'objet

J'utiliser la propriété anchorIcon sauf qu'il est seulement disponible en Marker Clusterer plus , et non l' Marker Clusterer plug-in (qui j'utilise).

Pour ceux qui veulent utiliser spécifiquement marqueur Clusterer - vous pouvez remplacer ClusterIcon.prototype.getPosFromLatLng_. L'objet ClusterIcon est globale, afin que nous puissions modifier au plus haut niveau d'un fichier de script sans déconner avec le code source du plug-in.

ancrera le marqueur au fond de l'icône:

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

I a changé le code de marcerclusterer.js pour soutenir paramètre anchorText en modifiant deux fonctions suivantes:

/**
 * 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

ancre / anchorIcon / propriétés anchorText n'a pas fonctionné pour moi ... donc je fait genre de solution:

J'utilise la fonction setCalculator() pour définir le texte du cluster:

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

quand je suis en train de la propriété text du cluster J'enroulant la valeur avec <span>, quelque chose comme ceci:

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

vous pouvez maintenant contrôler la position de l'étiquette de groupe avec ".myClass":

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