Comment utiliser Marker Clusqueter Plus sur une carte Google avec Retina Images

Question

J'utilise Clusterner de marqueurPlus pour grouper les marqueurs sur une carte Google, mais l'option EnaBreNtiCons ne semble pas fonctionner.

// Custom style to alter the default font color (style is always the same).
var styles = [
    {
        url: 'PATH_TO_MY_66x66px_IMAGE',
        textColor: '#ddddd',
        textSize: 18,
        width: 33,
        height: 33,
    }
];

// Calculator function to determine which style to use (I only have one)
var calculator = function (markers, iconstyles){
    return{ text: markers.length.toString(), index:1};
};

// Set Options
var clusterOptions = {
    title: 'Cluster Title',
    enableRetinaIcons: true,
    styles: styles,
    calculator: calculator
}

// Add to map
new MarkerClusterer(this.map, this.markers, clusterOptions);

---

L'option EnablerietinoCons ne semble pas fonctionner, l'image est affichée deux fois la taille.

Réglage de la largeur sur 66x66PX n'aident pas non plus.

Est-ce que quelqu'un sait comment configurer cela correctement?

Answer 1

Ceci est apparemment en bogue dans le clusterner Marker Plus. Le seul endroit dans le code où ils utilisent réellement cette option est ici:

img = "<img src='" + this.url_ + "' style='position: absolute; top: " + spriteV + "px; left: " + spriteH + "px; ";
if (!this.cluster_.getMarkerClusterer().enableRetinaIcons_) {
  img += "clip: rect(" + (-1 * spriteV) + "px, " + ((-1 * spriteH) + this.width_) + "px, " +
      ((-1 * spriteV) + this.height_) + "px, " + (-1 * spriteH) + "px);";
}
img += "'>";

Alors, ils ne désactivent que le coupure des icônes de sprite, mais ils ne gèrent pas réellement l'action de rétine requise. L'arborescence HTML de l'icône ressemble en fait à ceci:

Vous pouvez donc voir que la DIV entourant l'icône a des dimensions appropriées (33x33), mais l'image même (le code bleu) n'a pas de dimensions définies.

J'ai essayé de résoudre le problème en corrigeant la bibliothèque de clusters de marqueur, juste en ajoutant une branche d'autre:

img = "<img src='" + this.url_ + "' style='position: absolute; top: " + spriteV + "px; left: " + spriteH + "px; ";
if (!this.cluster_.getMarkerClusterer().enableRetinaIcons_) {
  img += "clip: rect(" + (-1 * spriteV) + "px, " + ((-1 * spriteH) + this.width_) + "px, " +
      ((-1 * spriteV) + this.height_) + "px, " + (-1 * spriteH) + "px);";
}
else {
    img += "width: " + this.width_ + "px;" + "height: " + this.height_ + "px;";
}
img += "'>";

Il semble fonctionner:

Bibliothèque correcte complète @Pastebin

Exemple de test - http://jsfiddle.net/rt28t/2/

Vous pouvez signaler un bogue et ajouter ceci sous forme de patch proposé: -)

Answer 2

Je sais que cette question a été répondue, mais une autre façon de résoudre ce problème (et probablement plus facilement) est juste à l'aide d'une icône de marqueur SVG .De cette façon:

• Votre solution supportera toute densité de pixels de périphérique
• Vous n'avez pas besoin de corriger la bibliothèque (avec tous les problèmes que cela peut causer)
• Le support de navigateur actuel est assez bon - Vérifiez Caniuse.com SVG-IMG pour navigateurSTATS

Answer 3

Il suffit de télécharger les icônes deux fois la taille:

m1.png = 53x53 (normal) 106x106 (retina)
m2.png = 56x56 (normal) 112x112 (retina) 
m3.png = 66x66 (normal) 132x132 (retina)
m4.png = 78x78 (normal) 156x156 (retina)
m5.png = 90x90 (normal) 180x180 (retina)

et ajouter à votre CSS:

#map .cluster img {
    max-width: 100%;
}