Etwas klebte an diesem. Ich rufe eine Liste von Geo-Koordinaten über JSON ab und stelle sie auf eine Google-Karte. Alles funktioniert gut, außer in dem Fall, in dem ich zwei oder mehr Marker genau an der gleichen Stelle habe. Die API zeigt nur 1 Marker an - den obersten. Ich nehme an, das ist fair genug, möchte aber einen Weg finden, sie alle irgendwie anzuzeigen.
Ich habe bei Google gesucht und ein paar Lösungen gefunden, aber sie scheinen meistens für V2 der API zu sein oder einfach nicht so toll. Idealerweise hätte ich gerne eine Lösung, bei der Sie auf eine Art Gruppenmarkierung klicken und dann die Markierungen anzeigen, die sich um die Stelle gruppieren, an der sie sich alle befinden.
Hat jemand dieses oder ein ähnliches Problem und möchte eine Lösung teilen?
quelle
OverlappingMarkerSpiderfier
in Kombination mit MarkerClusterer ist es eine gute Option, diemaxZoom
Option im Clusterkonstruktor festzulegen . Dadurch werden die Markierungen nach der angegebenen Zoomstufe "aufgehoben".Das Versetzen der Markierungen ist keine echte Lösung, wenn sie sich im selben Gebäude befinden. Möglicherweise möchten Sie die Datei markerclusterer.js folgendermaßen ändern:
Fügen Sie der MarkerClusterer-Klasse wie folgt eine Prototyp-Klickmethode hinzu. Diese werden später in der Funktion map initialize () überschrieben:
Fügen Sie in der ClusterIcon-Klasse nach dem Clusterclick-Trigger den folgenden Code hinzu:
Dann initialisieren Sie in Ihrer Funktion initialize () die Karte und deklarieren Ihr MarkerClusterer-Objekt:
Wobei multiChoice () IHRE (noch zu schreibende) Funktion ist, um ein InfoWindow mit einer Liste von Optionen zur Auswahl zu öffnen. Beachten Sie, dass das markerClusterer-Objekt an Ihre Funktion übergeben wird, da Sie dies benötigen, um zu bestimmen, wie viele Marker sich in diesem Cluster befinden. Beispielsweise:
quelle
Ich habe dies zusammen mit jQuery verwendet und es macht den Job:
quelle
Als Erweiterung von Chaoleys Antwort implementierte ich eine Funktion, die bei einer Liste von Orten (Objekte mit
lng
undlat
Eigenschaften), deren Koordinaten genau gleich sind, sie ein wenig von ihrem ursprünglichen Ort entfernt (Objekte an Ort und Stelle ändern). Sie bilden dann einen schönen Kreis um den Mittelpunkt.Ich fand heraus, dass für meinen Breitengrad (52 Grad Nord) 0,0003 Grad Kreisradius am besten funktionieren und dass Sie den Unterschied zwischen Breiten- und Längengrad in Kilometern ausgleichen müssen. Sie können ungefähre Conversions für Ihre Breite finden hier .
quelle
37.68625400000000000,-75.71669800000000000
zu37.686254,-75.716698
auch, was für alle Werte gleich ist ... Ich erwarte etwas wie ...37.68625400000000000,-75.71669800000000000
bis ...37.6862540000001234,-75.7166980000001234
37.6862540000005678,-75.7166980000005678
usw. Ich habe auch versucht, meinen Winkel zu ändern.@Ignatius beste Antwort, aktualisiert, um mit v2.0.7 von MarkerClustererPlus zu arbeiten.
Fügen Sie der MarkerClusterer-Klasse wie folgt eine Prototyp-Klickmethode hinzu. Diese werden später in der Funktion map initialize () überschrieben:
Fügen Sie in der ClusterIcon-Klasse nach dem Auslöser click / clusterclick den folgenden Code hinzu:
Dann initialisieren Sie in Ihrer Funktion initialize () die Karte und deklarieren Ihr MarkerClusterer-Objekt:
Wobei multiChoice () IHRE (noch zu schreibende) Funktion ist, um ein InfoWindow mit einer Liste von Optionen zur Auswahl zu öffnen. Beachten Sie, dass das markerClusterer-Objekt an Ihre Funktion übergeben wird, da Sie dies benötigen, um zu bestimmen, wie viele Marker sich in diesem Cluster befinden. Beispielsweise:
quelle
maxZoom
Ich denke, Ihr Problem ist nur dann ein Problem, wenn kein maxZoom festgelegt ist oder der maxZoom für den Cluster größer als der Zoom für die Karte ist. Ich habe Ihre Hardcodierung durch dieses Snippet ersetzt und es scheint gut zu funktionieren:var maxZoom = mc.getMaxZoom(); if (null === maxZoom || maxZoom > mc.getMap().maxZoom) { maxZoom = mc.getMap().maxZoom; if (null === maxZoom) { maxZoom = 15; } }
clickedCluster.center_.lat()
/clickedCluster.center_.lng()
Die obigen Antworten sind eleganter, aber ich habe einen schnellen und schmutzigen Weg gefunden, der wirklich wirklich unglaublich gut funktioniert. Sie können es in Aktion unter www.buildinglit.com sehen
Ich habe meiner genxml.php-Seite lediglich einen zufälligen Versatz zum Breiten- und Längengrad hinzugefügt, sodass jedes Mal, wenn die Karte mit Markierungen erstellt wird, leicht unterschiedliche Ergebnisse mit Versatz zurückgegeben werden. Das klingt nach einem Hack, aber in Wirklichkeit müssen die Markierungen nur einen leichten Schub in eine zufällige Richtung bewegen, damit sie auf der Karte angeklickt werden können, wenn sie sich überlappen. Es funktioniert wirklich sehr gut, würde ich besser sagen als die Spinnenmethode, denn wer möchte mit dieser Komplexität umgehen und sie überall entspringen lassen. Sie möchten nur den Marker auswählen können. Das zufällige Anstupsen funktioniert perfekt.
Hier ist ein Beispiel für die Erstellung des while-Anweisungsiterationsknotens in meiner php_genxml.php
Beachten Sie unter lat und long, dass es den + Offset gibt. aus den 2 Variablen oben. Ich musste zufällig durch 0,1000 durch 10000000 teilen, um eine Dezimalstelle zu erhalten, die zufällig klein genug war, um die Markierungen kaum zu bewegen. Fühlen Sie sich frei, an dieser Variablen zu basteln, um eine zu erhalten, die genauer auf Ihre Bedürfnisse zugeschnitten ist.
quelle
In Situationen, in denen sich mehrere Dienste im selben Gebäude befinden, können Sie die Markierungen nur geringfügig (z. B. um 0,001 Grad) in einem Radius vom tatsächlichen Punkt versetzen. Dies sollte auch einen schönen visuellen Effekt erzeugen.
quelle
Dies ist eher eine "schnelle und schmutzige" Notlösung, ähnlich der von Matthew Fox vorgeschlagenen, diesmal mit JavaScript.
In JavaScript können Sie einfach das Lat und Long aller Ihrer Positionen versetzen, indem Sie beiden einen kleinen zufälligen Versatz hinzufügen, z
myLocation[i].Latitude+ = (Math.random() / 25000)
(Ich habe festgestellt, dass das Teilen durch 25000 eine ausreichende Trennung ergibt, den Marker jedoch nicht wesentlich von der genauen Position, z. B. einer bestimmten Adresse, entfernt.)
Dies macht es einigermaßen gut, sie voneinander zu versetzen, aber erst, nachdem Sie genau hineingezoomt haben. Beim Verkleinern ist immer noch nicht klar, dass es mehrere Optionen für den Standort gibt.
quelle
Schauen Sie sich Marker Clusterer für V3 an - diese Bibliothek gruppiert nahegelegene Punkte zu einem Gruppenmarker. Die Karte wird vergrößert, wenn auf die Cluster geklickt wird. Ich würde mir vorstellen, dass Sie beim Vergrößern immer noch das gleiche Problem mit Markierungen an derselben Stelle haben würden.
quelle
Aktualisiert, um mit MarkerClustererPlus zu arbeiten.
quelle
Ich mag einfache Lösungen, also hier ist meine. Anstatt die Bibliothek zu modifizieren, würde es schwieriger werden, sie zu pflegen. Sie können das Ereignis einfach so verfolgen
dann können Sie es weiter verwalten
Ich habe also Bootstrap verwendet, um ein Panel mit einer Liste anzuzeigen. was ich viel komfortabler und brauchbarer finde als Spinnenfischen an "überfüllten" Orten. (Wenn Sie einen Clusterer verwenden, kommt es wahrscheinlich zu Kollisionen, sobald Sie eine Spinne haben). Dort können Sie auch den Zoom überprüfen.
Übrigens. Ich habe gerade eine Broschüre gefunden und es scheint viel besser zu funktionieren. Der Cluster AND Spiderfy funktioniert sehr flüssig. http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.10000.html und es ist Open Source.
quelle
Überprüfen Sie dies: https://github.com/plank/MarkerClusterer
Dies ist der MarkerCluster, der so geändert wurde, dass er ein infoWindow in einem Cluster-Marker enthält, wenn sich mehrere Marker an derselben Position befinden.
Sie können hier sehen, wie es funktioniert: http://culturedays.ca/en/2013-activities
quelle
Wenn Sie die oben angegebenen Antworten erweitern, stellen Sie einfach sicher, dass Sie beim Initialisieren des Kartenobjekts die Option maxZoom festlegen.
quelle
Wenn Sie den Versatz angeben, werden die Markierungen weit entfernt, wenn der Benutzer auf max. Also habe ich einen Weg gefunden, das zu erreichen. Dies ist vielleicht kein richtiger Weg, aber es hat sehr gut funktioniert.
Stellen Sie den zIndex des Markers so ein, dass Sie das Markierungssymbol sehen, das Sie oben sehen möchten. Andernfalls werden die Markierungen wie beim automatischen Tauschen animiert. Wenn der Benutzer auf den Marker tippt, behandeln Sie den zIndex, um den Marker mit zIndex Swap nach oben zu bringen.
quelle
Wie man damit durchkommt .. [Swift]
Ein neuer Marker wird erstellt? Überprüfen
clusterArray
und manipulieren Sie den VersatzErgebnis
quelle
Zusätzlich zu Matthew Fox 'hinterhältiger genialer Antwort habe ich jedem Lat und Lng beim Setzen des Markerobjekts einen kleinen zufälligen Versatz hinzugefügt. Beispielsweise:
quelle
Wenn Sie die obigen Antworten erweitern, wenn Sie verknüpfte Zeichenfolgen erhalten haben und keine Position hinzugefügt / subtrahiert haben (z. B. "37.12340-0.00069"), konvertieren Sie Ihren ursprünglichen Längen- / Breitengrad in Gleitkommazahlen, z. B. mit parseFloat (), und fügen Sie dann Korrekturen hinzu oder subtrahieren Sie sie.
quelle