Api GoogleMaps V3, icône de regroupement personnalisé

comment changer l'icône du cluster? j'aime avoir la même icône, avec une autre couleur que le bleu.

29
demandé sur Amro 2010-12-11 12:39:04

4 réponses

vous devez utiliser le paramètre styles lors de L'initialisation de L'objet MarkerClusterer - le code ci-dessous montre les styles par défaut donc si vous voulez recolorer une des icônes il suffit de changer l'url pertinente à 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: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m2.png",
width: 56
},
{
height: 66,
url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m3.png",
width: 66
},
{
height: 78,
url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m4.png",
width: 78
},
{
height: 90,
url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m5.png",
width: 90
}]}

//init clusterer with your options
var mc = new MarkerClusterer(map, markers, mcOptions);
60
répondu Michal 2018-09-25 04:45:48

Google a changé son repo. La dernière mise à jour de cluster repo 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 source et donner lien à partir 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
}]}
8
répondu jayesh 2016-05-19 10:13:03

un raccourci remplace le chemin d'image comme ceci:

MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = 
    "https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m";
2
répondu hoju 2016-05-28 12:47:39

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
répondu sandeep kumar 2018-01-06 11:29:56