Ícones do MarkerClusterer de estilo?
-
27-10-2019 - |
Pergunta
Estou usando o MarkerCluster.js para criar clustering em minha API do Google Maps.Os clusters funcionam como eu quero, mas quero estilizar de forma diferente dos círculos amarelos, azuis e vermelhos.Eu estava tentando usar MarkerStyleOptions e ele diz que você tem uma variedade de estilos com o menor ícone de cluster primeiro e o maior por último.Tentei criar isso abaixo, mas estou ficando muito confuso sobre qual sintaxe usar e não consigo encontrar nenhum bom exemplo.
var clusterStyles = [
[opt_textColor: 'white'],
[opt_textColor: 'white'],
[opt_textColor: 'white']
];
var mcOptions = {
gridSize: 50,
styles: clusterStyles,
maxZoom: 15
};
var markerclusterer = new MarkerClusterer(map, cluster, mcOptions);
Solução
O que você precisa fazer é usar o url para especificar quais imagens usar em vez das imagens azul / amarelo / vermelho que estão sendo usadas atualmente.E provavelmente uma boa ideia incluir as opções de altura e largura também.
var clusterStyles = [
{
textColor: 'white',
url: 'path/to/smallclusterimage.png',
height: 50,
width: 50
},
{
textColor: 'white',
url: 'path/to/mediumclusterimage.png',
height: 50,
width: 50
},
{
textColor: 'white',
url: 'path/to/largeclusterimage.png',
height: 50,
width: 50
}
];
Outras dicas
Nunca é tarde demais para postar uma resposta bastante útil, então, além disso, você pode consultar todo o Documentação do MarkerClusterer para IconStyle
< PaulUPDATE
Há também o utilitário google maps v3 no github conforme declarado por ehcanadian