web-dev-qa-db-fra.com

Styling MarkerClusterer Icons?

J'utilise MarkerCluster.js pour créer un clustering dans mon API Google Maps. Les grappes fonctionnent comme je les veux, mais je veux styler différemment des cercles jaunes, bleus et rouges. J'essayais d'utiliser les MarkerStyleOptions et il dit que vous avez un tableau de styles avec la plus petite icône de cluster en premier et la plus grande en dernier. J'ai essayé de créer cela ci-dessous mais je suis vraiment confus quant à la syntaxe à utiliser et je ne trouve pas de bons exemples.

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);
javascriptgoogle-maps-api-3markerclusterer
45
Louise McComiskey

Ce que vous devez faire est d'utiliser l'URL pour spécifier les images à utiliser au lieu des images bleues/jaunes/rouges actuellement utilisées. Et probablement une bonne idée d'inclure également les options de hauteur et de largeur.

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
  }
];
90
duncan

Il n'est jamais trop tard pour publier une réponse plutôt utile, vous pouvez en outre parcourir l'ensemble Documentation MarkerClusterer pour IconStyle

[~ # ~] mise à jour [~ # ~]

Il y a aussi tilitaire google maps v3 sur github comme indiqué par ehcanadian

3
Yazan Rawashdeh