Como usar o Marker Clusterer Plus em um mapa do Google com imagens retina
-
21-12-2019 - |
Pergunta
estou a usar Marcador Clusterer Plus para agrupar marcadores em um mapa do Google, mas a opção enableRetinaIcons parece não 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);
A opção enableRetinaIcons parece não funcionar, a imagem é mostrada com o dobro do tamanho.
Definir a largura para 66x66px também não ajuda.
Alguém sabe como configurar isso corretamente?
Solução
Aparentemente, isso é um bug no Marker Clusterer Plus.O único lugar no código onde eles realmente usam essa opção é aqui:
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 += "'>";
Na verdade, eles apenas desativam o recorte para ícones de sprites, mas na verdade não executam a ação de retina necessária.A árvore HTML do ícone se parece com isto:
então você pode ver que o div ao redor do ícone tem dimensões adequadas definidas (33x33), mas a própria imagem (o código azul) não possui nenhuma dimensão definida.
Tentei corrigir o problema corrigindo a biblioteca do clusterer de marcadores, apenas adicionando uma ramificação else:
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 funcionar:
Biblioteca completa corrigida @pastebin
Exemplo de teste - http://jsfiddle.net/Rt28T/2/
Você pode relatar um bug e adicioná-lo como um patch proposto :-)
Outras dicas
Eu sei que esta pergunta foi respondida, mas outra maneira de resolver este problema (e provavelmente mais fácil) é simplesmente usando um ícone de marcador SVG.Dessa maneira:
- Sua solução suportará qualquer densidade de pixels de dispositivo
- Você não precisa corrigir a biblioteca (com todos os problemas que isso pode causar)
- O suporte atual do navegador é muito bom. Verifique caniuse.com svg-img para estatísticas do navegador
Basta fazer upload dos ícones com o dobro do tamanho:
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)
E adicione ao seu CSS:
#map .cluster img {
max-width: 100%;
}