Ich habe eine einfache JavaScript-Karten-Anwendung, an der ich arbeite. Dazu muss ich die Bewegung mehrerer Marker zwischen verschiedenen Koordinaten animieren. Jeder Marker kann sich frei bewegen und alle Marker werden in einer Array-Liste gespeichert. Allerdings hatte ich Probleme, sie zu einem reibungslosen Übergang zu bewegen.
Ich habe eine Menge Forschung und Versuch / Irrtum gemacht, aber kein Glück, hat irgendjemand Glück dabei?
Mein schnell-und-dreckiger Ansatz beinhaltet nicht eine Menge Forschung: (
Hier ist die Demo: Ссылка Klicken Sie auf a Markierung, um mit der Bewegung zu beginnen, nachdem sie angehalten wurde, können Sie erneut klicken, um zu ihrem Anfangspunkt zurückzukehren. Klicken während der Bewegung gibt seltsame Ergebnisse.
Start- und Endpunkte sind in initialize() vordefiniert. Die Animation wird definiert, indem Start- und Endpunkte in 100 Segmente unterteilt werden und die Markierung an diesen Punkten mit einem festgelegten Intervall platziert wird. So ist die Animationszeit fest: Marker bewegen sich länger "schneller" als kürzere Distanzen.
Ich habe nicht viel getestet, ich weiß, dass das Klicken auf einen sich bewegenden Marker zu unerwarteten Ergebnissen führt (Start- und Endpunkte werden verlegt)
Dies ist der "interessante" Teil der Demo:
%Vor%Sie können die marker-animate-discontinuous Bibliothek verwenden, um Marker zu erstellen reibungslosen Übergang von einem Ort zum anderen.
Sie könnten Ihren Marker folgendermaßen initialisieren:
%Vor%Wenn Sie dies definiert haben, bewegt sich Ihr Marker innerhalb von 1 Sekunde gleichmäßig an eine neue Position, rufen Sie einfach marker.setPosition ().
aufWenn Sie den Marker vorwärts und rückwärts animieren möchten, wechseln Sie einfach setPosition jede Sekunde.
%Vor%P.S. Ich bin der Autor der Bibliothek.
Ich bin mir nicht sicher, ob es das ist, wonach Sie suchen, aber ich werde es trotzdem teilen: Ich habe diesen Code geschrieben, um die Bewegung eines Autos mit einer bestimmten Geschwindigkeit in km / h zu simulieren. Sie müssen nur die Koordinaten für jeden Punkt angeben, zu dem der Marker / das Auto fahren soll (dann wird der Marker zwischen den Koordinaten animiert).
Ich änderte rcravens 'Antwort , um zu diesem Thema zu gelangen:
%Vor%jsfiddle - DEMO
Beachten Sie, dass Sie die Bibliothek "geometry" hinzufügen müssen, wenn Sie Google Maps verwenden, um google.maps.geometry.spherical.computeDistanceBetween verwenden zu können:
Ссылка
Ich hoffe, es hilft!
Eine Alternative ist die Verwendung von CSS-Übergängen. Das wichtigste ist, die DIVs zu identifizieren, die Google Maps für Ihren Marker verwendet (es gibt 2, die für Touch-Events transparent sind). Die Untersuchung wurde für Sie durchgeführt und Sie müssen sie wirklich nur einmal verstehen.
Ein komplettes Beispiel finden Sie hier Sehen Sie, wie sich Hänsel und Gretel auf der Karte bewegen! Und die Übergangszeiten verschmelzen, wenn es eine Verzögerung gibt.
Den ganzen Code für meine Brotkrumen Ultimate Web App finden Sie hier Sie werden sich hauptsächlich für die HandleMap interessieren .js-Datei, aber es gibt eine aaa_readme.txt
Hier ist ein Teil des Codes: -
%Vor%Tags und Links javascript google-maps animation google-maps-markers google-maps-api-3