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);
- 1. Google Maps Api v3 - comment supprimer les icônes de cluster?
- 2. API Google Maps v3 BrowserIsCompatible
- 3. personnalisée Google Maps V3 contrôle problème
- 4. API google maps v3 avec des polygones?
- 5. Google Maps API v3 sur HTTPS?
- 6. Itinéraire distance dans Google Maps API v3
- 7. Google Maps API v3 For loop Trouble
- 8. API Google Maps v3 directions.route() demande
- 9. API Google Maps v3 montrent l'entrée locale
- 10. API Google Maps v3 JavaScript EVENTS question
- 11. Google Maps API v3 ... non-mobile?
- 12. Possibilité d'utiliser Google Maps API v3 sans clé API?
- 13. Google Earth intégré à Google Maps API v3?
- 14. API Google Maps v3: comment supprimer un écouteur d'événements?
- 15. API Google Maps v3 Geocoder.geocode() argument "location" ne fonctionne pas
- 16. google maps API v3 - comment dessiner des polygones/polylignes dynamiques?
- 17. Google Maps API v3: Ajouter des polylignes dans une boucle?
- 18. Google Maps API v3 ne supporte pas encore "hl" param?
- 19. Meilleur plugin pour jQuery et Google Maps API v3?
- 20. API Google Maps v3 et onglets jQuery-UI
- 21. Google Maps Api v3 Positionnement des contrôles personnalisés
- 22. CSS KML Calques Cursor - Google Maps API v3
- 23. Google Maps API v3 - Comment effacer les superpositions?
- 24. Google Maps API V3: limite les limites de la carte
- 25. Comment changer MapTypeid dans Google Maps API v3?
- 26. google maps javascript api v3 - superposition derrière les routes
- 27. html-/style des info-bulles dans google maps api v3
- 28. google maps api v3 - le plus proche streetview
- 29. Problèmes avec les directions API Google Maps V3 et jQuery
- 30. Google Maps API V3 - besoin d'aide avec plusieurs marqueurs
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'. –