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);
Foi útil?

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

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top