2016-07-27 8 views
0

Ich habe eine Karte, die Markierungen programmgesteuert basierend auf Werten in meiner Datenbank platziert hat. Wenn Sie auf eine Markierung klicken, wird eine Detailseite für diese Position angezeigt.Google Maps API: Wie erkennt man, ob ein Marker durch einen anderen Marker verdeckt ist?

Mein Problem ist, dass wenn die Karte ausreichend herausgezoomt ist, Marker, die nahe genug beieinander liegen, als ein einzelner Marker erscheinen, der einige der Marker versteckt. Gibt es eine Möglichkeit, programmatisch zu sagen, ob ein Marker Teil einer Gruppe von Markern ist oder von anderen Markern versteckt/verdeckt wird?

Meine Absicht ist es für jeden dynamisch generierten Marker, so etwas zu tun:

marker.addListener('click', function() { 
    // if marker is not hiding any other markers 
    window.location.href = markerURL; 
    // else if it is hiding markers/is part of a group of markers 
    map.setZoom(15); 
    map.setCenter(marker.getPosition()); 
}); 

Ich habe die Marker API documentation geprüft, können aber keine nützliche Methoden zu finden scheinen. getClickable und getVisible geben immer true in meinem Fall, unabhängig davon, ob ein Marker von einem anderen Marker abgedeckt ist. Irgendwelche Vorschläge? Vielen Dank!

+0

Sie könnten die [MarkerClusterer] verwenden möchten (https://github.com/googlemaps/js-marker-clusterer), um zu verdeutlichen, wenn mehrere Marker gruppiert sind. – geocodezip

+0

@geocodezip Vielen Dank für den Vorschlag. Ich dachte darüber nach, hoffte aber, dass es einen einfacheren Weg gäbe. Ich brauche keine Kontrolle über das Clustering, ich möchte nur wissen, ob es passiert ist oder nicht. Ich könnte am Ende diese Bibliothek benutzen, wenn ich keine bessere Lösung finden kann. – elethan

+0

Es ist nichts in die API integriert, um so etwas zu tun und ich vermute, dass jeder Algorithmus, den Sie sich vorstellen, nicht so einfach oder so intuitiv ist wie der Marker-Clusterer – geocodezip

Antwort

1

Ich endete mit MarkerClusterer gehen, um mein Problem zu lösen. Ich hatte auf eine einfachere Lösung gehofft, aber das war schließlich ziemlich einfach.

Das einzige, was ich brauchte, um meinen vorhandenen Marker-Erzeugungscode hinzufügen war eine Liste: var markers = [];, und ich rief dann markers.push(marker); auf all meine Markierungen. Der letzte Schritt war, ein neues MarkerClusterer Objekt zu erstellen:

var markerCluster = new MarkerClusterer(map, markers, options); 

Und MarkerClusterer Griffe der Rest mehr oder weniger (die options Parameter sind optional, aber ich habe es den Weg auf meine Bilder zu setzen und die maximale Zoomstufe eingestellt). Nun, in den Situationen, in denen meine Marker vorher übereinander gestapelt waren und es unmöglich macht, bestimmte Marker bei bestimmten Zoomstufen zu sehen oder anzuklicken, sehe ich stattdessen einen Cluster mit einer Zahl, die die Anzahl der Marker in diesem Cluster angibt. Wenn Sie auf das Cluster-Symbol klicken, wird weiter hineingezoomt und meine Marker angezeigt.

All dies wurde nach der simple usage example auf ihrer GitHub-Seite getan, aber sie haben auch pretty good documentation. Die meiste Zeit dieses immer Recht auf Arbeit tatsächlich verbrachte die Cluster-Icons Styling meiner Website Farbschema anzupassen ...

enter image description here