Cómo usar Marker Clusterer Plus en un mapa de Google con imágenes de Retina

Question

Estoy usando marcador clustererMás para agrupar marcadores en un mapa de Google, pero la opción de enablerEtinaiCons no parece funcionar.

// 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);

---

La opción de enableretinaiCons no parece funcionar, la imagen se muestra el doble del tamaño.

Configuración del ancho a 66x66px tampoco lo ayuda.

¿Alguien sabe cómo configurar esto correctamente?

Answer 1

Esto aparentemente es un error en Marker Clusterer Plus. El único lugar en código donde realmente usan esta opción está aquí:

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 += "'>";

para que, de hecho, solo se deshabilitan el recorte para los iconos de Sprite, pero en realidad no ejecutan la acción de retina requerida. El árbol HTML del icono en realidad se parece a esto:

Para que pueda ver que el DIV que rodea el icono tiene un conjunto adecuado de dimensiones (33x33), pero la imagen (el código azul) no tiene ningún conjunto de dimensiones.

Intenté solucionar el problema al parchear la biblioteca de clústeres de marcador, simplemente agregando una rama otra otra otra cosa:

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 += "'>";

Parece que funciona:

Biblioteca remendada completa @pastebin

Ejemplo de prueba - http://jsfiddle.net/rt28t/2/

Puede informar un error y agregar esto como un parche propuesto: -)

Answer 2

Sé que esta pregunta ha sido respondida, pero otra forma de resolver este problema (y probablemente más fácil) es simplemente usando un icono de marcador SVG .De esa manera:

• Su solución soportará cualquier dispositivo de la densidad de píxeles
• No necesita parchear la biblioteca (con todos los problemas que puede causar)
• El soporte actual del navegador es bastante bueno: verifique caniuse.com svg-img para el navegadorEstadísticas

Answer 3

Simplemente cargue los iconos el doble del tamaño:

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)

y agregue a su CSS:

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