Comment puis-je changer d'icône de cluster? Je voudrais aimer avoir la même icône, avec une autre couleur que le bleu.Google Maps Api v3, icône Cluster personnalisée
Répondre
Vous devez utiliser le paramètre de styles lors de l'initialisation objet MarkerClusterer - le code ci-dessous montre les styles par défaut, donc si vous voulez recolorer l'une des icônes changer simplement l'URL correspondant à votre image ...
//set style options for marker clusters (these are the default styles)
mcOptions = {styles: [{
height: 53,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png",
width: 53
},
{
height: 56,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m2.png",
width: 56
},
{
height: 66,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png",
width: 66
},
{
height: 78,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png",
width: 78
},
{
height: 90,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m5.png",
width: 90
}]}
//init clusterer with your options
var mc = new MarkerClusterer(map, markers, mcOptions);
Ces les icônes ne sont plus sur les serveurs Googles.
ils changent repo à git hub voici l'icone https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images – jayesh
@Kaippally J'ai couvert une solution à cela dans le post SO suivant [quel est le chemin source alternatif pour la bibliothèque google markerclusterer.js?] (http://stackoverflow.com/a/37183674/1301937) –
Google a changé son repo. Dernière prise en pension est: https://github.com/googlemaps/js-marker-clusterer images: https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images
Vous pouvez également envisager de télécharger la source et donner le lien de votre chemin local. De cette façon, vous aurez plus de contrôle sur les ressources dont votre application a besoin.
local_path "/pucblic/"
mcOptions = {styles: [{
height: 53,
url: local_path+"m1.png",
width: 53
},
{
height: 56,
url: local_path+"m2.png",
width: 56
},
{
height: 66,
url: local_path+"m3.png",
width: 66
},
{
height: 78,
url: local_path+"m4.png",
width: 78
},
{
height: 90,
url: local_path+"m5.png",
width: 90
}]}
Un raccourci est PRÉPONDÉRANTS le chemin d'image comme ceci:
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ =
"https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m";
Le chemin de l'image ci-dessus n'est pas correct https://raw.githubusercontent.com/googlemaps/v3- utilitaire-bibliothèque/master/markerclustererplus/images/m1.png –
Solution géniale, utilisez simplement un chemin local au lieu de l'URL de contenu github brut. – phaberest
Voici des photos originales
markerClusterOptions = {styles: [{
height: 53,
url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m1.png",
width: 53
},
{
height: 56,
url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m2.png",
width: 56
},
{
height: 66,
url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m3.png",
width: 66
},
{
height: 78,
url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m4.png",
width: 78
},
{
height: 90,
url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m5.png,
width: 90
}]}
markerCluster = new MarkerClusterer(map, markers,markerClusterOptions);
On dirait qu'il ya manque de virgule dans la liste des propriétés pour chaque marqueur individuel ... à partir de FireFox 'Erreur: manquant} après la liste de propriétés'. –