Wie kann ich das Cluster-Symbol ändern? Ich möchte das gleiche Symbol haben, mit einer anderen Farbe als Blau.Google Maps Api v3, benutzerdefiniertes Cluster-Symbol
Antwort
Sie müssen styles-Parameter verwenden, wenn MarkerClusterer Objekt initialisiert wird - der Code unten zeigt Standardstile so, wenn Sie eines der Symbole recolour wollen einfach nur die entsprechende URL zu Ihrem Bild ändern ...
//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);
These Symbole sind nicht mehr auf Googles-Servern.
sie ändern Repo zu git Hub hier ist der icone https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images – jayesh
@Kaippally Ich habe eine Lösung für diese in den folgenden SO Post [Was ist der alternative Quellpfad für die Bibliothek google markerclusterer.js?] (http://stackoverflow.com/a/37183674/1301937) –
Google hat sein Repo geändert. Neueste Cluster Repo ist: Bilder: https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images
Sie können auch in Erwägung ziehen, Quelle herunterladen und Link von Ihrem lokalen Pfad geben. Auf diese Weise haben Sie mehr Kontrolle über die Ressourcen, die Ihre Anwendung benötigt.
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
}]}
Eine Verknüpfung ist das Überschreiben der Bildpfad wie folgt aus:
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ =
"https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m";
Der obige Pfad ist nicht korrekt https://raw.githubusercontent.com/googlemaps/v3- utility-library/master/markerclustererplus/images/m1.png –
Geniale Lösung, verwenden Sie einfach einen lokalen Pfad anstelle der rohen github Inhalt URL. – phaberest
Hier wird original Fotos
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. Benutzerdefiniertes Overlay anklickbar machen (Google Maps API v3)
- 2. Google Maps JavaScript API v3
- 3. Google Maps API v3 Markerkoordinaten
- 4. Google Maps API v3 BrowserIsCompatible
- 5. Google Maps API v3: Zeichnungsmanager
- 6. Google Maps API v3 Gemeindegrenze
- 7. Google Maps v3 Fehler
- 8. jqtouch/google maps api v3 ausgabe
- 9. Google Maps API V3-Methode fitBounds()
- 10. Google Maps Api v3 - getBounds ist undefined
- 11. Google Maps API v3: Kartentyp ändern Ereignis
- 12. Problem mit Google Maps API v3
- 13. Google Maps API v3 Problem mit Firefox
- 14. Google Maps API v3 addDomListener-Methode Fragen?
- 15. Google Maps v3 API mouseover mit Polygonen?
- 16. Google maps api v3 Suchpolygon ohne Mausereignisse
- 17. Google Maps API V3 - Benutzerdefinierte Fliesen
- 18. google maps api v3 keine etiketten?
- 19. Google Maps API V3 Graue Bereiche
- 20. Google Maps v3 API - Auto Complete (Adresse)
- 21. Erlaubt Google Maps API v3 größere Zoomwerte?
- 22. Google Maps v3 OverlayView.getProjection()
- 23. Geocode in Google Maps v3
- 24. Google Earth mit Google Maps API v3 integriert?
- 25. Was ist der API-Schlüssel für Google Maps API V3?
- 26. Google Maps v3 Sidebar Links
- 27. falsche Positionierung v3 Google Maps
- 28. Google Maps API v3: Benutzerdefiniertes Overlay mit Leinwandzeichnung, die keine Ereignisse in Safari empfängt
- 29. Google Maps v3 - Kontextmenü verfügbar?
- 30. Falsche Standardmarkierungen Google Maps v3
Sieht aus wie es Kommas in der Eigenschaftenliste für jeden einzelnen Marker fehlt ... von FireFox 'Fehler: fehlt} nach der Eigenschaftsliste'. –