Ich baue ein Mitgliederverzeichnis auf, das die Mitglieder entweder in der Reihenfolge des Namens und der Entfernung von einer Stadt auflistet und dann mit dem Google Maps API v3 auf einer Karte anzeigt.
Ich habe es fast fertig, wie ich es will, aber ich bin besorgt, dass es ein bisschen langsam ist. Ich lade es bereits asynchron, aber es gibt ein Problem mit den Markern.
Ich möchte, dass die Karte geladen wird und dann die Marker nacheinander in einer Drop-Animation angezeigt werden. Im Moment gibt es eine Verzögerung und alle fallen zusammen und manchmal erscheinen sie auf der Karte und fallen dann ab, was sehr merkwürdig aussieht.
Ich verwende ein PHP foreach-Skript (aus einer MYSQL-Datenbank), um das Javascript-Array für die Mitglieder auszugeben. Es kann irgendwo zwischen 10 und 400 Markierungen auf der Karte geben, aber normalerweise nicht mehr als 100 gleichzeitig / p>
Der Kürze halber habe ich im folgenden Beispiel nur 4 Marker eingefügt (die, wie bereits erwähnt, von einem PHP foreach-Skript ausgegeben werden):
%Vor%Wie kann ich das beschleunigen und die Markierungen in einer Drop-Animation anzeigen lassen, nachdem die Seite geladen wurde?
TL, DR: Link zur Demo
Meiner Meinung nach müssen Sie benutzerdefinierte Animationsfunktionen schreiben, um etwas Glattes zu erstellen.
Ich habe mit dem out-of-the-box-Set google.maps.Animation.DROP und verschiedenen setTimeout -Einstellungen gespielt und konnte keine zufriedenstellenden Einstellungen finden. Das größte Hindernis scheint zu sein, dass eine Handvoll von auf einmal stattfindenden Marker-DROPs die Animationsglätte schnell verschlechtert, was zu einem hässlichen, abgehackten, unordentlichen Markeregen führt. Es hat sogar meinen IE7 abgestürzt: (
Mit anderen Worten, wenn Sie eine gut aussehende Sequenz von DROPs wollen, muss die Zeitverzögerung zwischen aufeinanderfolgenden DROPs relativ groß sein (100-200 Millisekunden), und bei 100 Markern bedeutet das, dass Sie 10 bis 20 Sekunden warten, bis die letzter Marker fällt ab. Ich denke, es ist viel zu lang, dass der Endbenutzer diese ganze Animation durchgeht, aber wenn die DROP-Verzögerungen kurz sind, sieht die Animation der Karte nicht gut aus. Es ist ein Gleichgewicht zwischen Animationsqualität und Ladegeschwindigkeit.
Eine Problemumgehung könnte darin bestehen, der Karte einen Klick-Listener hinzuzufügen, sodass die verbleibenden nicht angezeigten Markierungen sofort angezeigt werden, wenn sie ausgelöst werden. Ich habe diese Logik in meiner Demo nicht hinzugefügt.
Hier ist die Demo zu JSFiddle . Es gibt drei Variablen, mit denen man herumspielen kann, wobei eine die Anzahl der Marker steuert und die anderen zwei die Verzögerung zwischen den Marker-DROPs steuern. Sie können diese Werte ändern und dann auf & gt; Führen Sie aus, um die Änderungen anzuzeigen.
Einige Anmerkungen:
Ich sortiere die Zufallsliste so, dass die Marker von oben nach unten fallen. Ich denke, es sieht besser aus als der vereinzelte Regen von Markern. Sie können die Sortierfunktion auch nach Entfernung umschreiben, sodass sich die Sites zuerst einem vordefinierten DROP-Zentrum nähern.
Es gibt eine selbst-ausführende anonyme Funktion, die das Zeitlimit umschließt, so dass neue Variablenbereiche für jeden Marker erstellt werden.
Wenn Ihre Seite lange zum Laden benötigt, können Sie das Google Maps-API asynchron mit einem callback laden, das möglicherweise als Parameter für die URL definiert ist, die die Google Maps-JavaScript-Bibliothek lädt:
Damit können Sie Ihre bestehende Funktion initialize beibehalten, die ausgeführt wird, nachdem die JavaScript-Bibliothek von Google Maps vollständig geladen wurde. Sie möchten jedoch den Aufruf von initialize() entfernen, der sich derzeit in Ihrer $(document).ready befindet dass es nicht zweimal läuft.
Sie sollten keinen zweistufigen Prozess sehen, bei dem der Marker auf der Karte platziert wird, gefolgt von der DROP -Animation. Sie können auch sehen, wie lange die Funktion setMarkers benötigt, um ausgeführt zu werden. Wenn dies zu lange dauert, könnte dies die Ursache für das sein, was Sie beschreiben.
Eine Sache, die Sie in JavaScript verwenden können, wenn Sie alle Ihre Markierungen erstellen möchten, aber eine Verzögerung zwischen jeder Marker-Erstellung hinzufügen, ist die Funktion JavaScript setTimeout( function, delayInMilliseconds . Sie müssen den Überblick behalten, wo Sie sich in Ihrem Marker-Array befinden, aber es funktioniert, um die Arbeit in verschiedene Arbeitseinheiten zu unterteilen. Wenn Sie setTimeout verwenden, sollten Sie in der Lage sein, zwischen jedem Marker-Drop eine kurze Verzögerung hinzuzufügen, die Ihnen den Effekt geben soll, den Sie erreichen möchten.
Tags und Links javascript google-maps google-maps-markers google-maps-api-3