Styling von MarkerClusterer-Symbolen?
-
27-10-2019 - |
Frage
Ich verwende MarkerCluster.js, um Clustering in meiner Google Maps-API zu erstellen.Die Cluster funktionieren so, wie ich sie haben möchte, aber ich möchte sie anders stylen als gelbe, blaue und rote Kreise.Ich habe versucht, die MarkerStyleOptions zu verwenden, und es heißt, Sie haben eine Reihe von Stilen mit dem kleinsten Cluster-Symbol zuerst und dem größten zuletzt.Ich habe versucht, dies unten zu erstellen, aber ich bin wirklich verwirrt darüber, welche Syntax verwendet werden soll, und kann keine guten Beispiele finden.
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);
Lösung
What you need to do is use the url to specify which images to use instead of the blue/yellow/red images currently being used. And probably a good idea to include the height and width options too.
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
}
];
Andere Tipps
It's never too late to post a rather helpful answer, so additionally you can look through the whole MarkerClusterer Documentation for IconStyle
UPDATE
There's also google maps v3 utility on github as stated by ehcanadian