Fahrsimulator in Google Maps API

[Berliner84]

Hallo, ich kenne mich leider nicht mit Javascript aus, versuche aber, für ein Leitstellenprogramm eine Art Fahrsimulator über die Google Maps Api mit einzubauen. Im Prinzip sollte es so wie hier aussehen:

http://econym.org.uk/gmap/example_cartrip.htm

Die Route wird (vorgegeben) vom Programm an die Seite übermittelt und ein Fahrzeug fährt die Route auf der Karte ab (später sollen auch mehrere virtuelle Fahrzeuge ihre Routen abfahren). Ich habe eine Karte mit Routenfunktion in V3 erstellt, so wie es das Tutorial von Google beschreibt. Eine .kml habe ich integriert (Wachen) und ein Einsatzort ist als Beispiel in der Karte markiert.

http://wp1067500.wp092.webpack.hosteurope.de/map2.htm

Soweit, so gut. Nur mit dem Fahrsimulator-Skript, das ich von der Beispielsseite kopiert habe, funktioniert es nicht. In der Google-Doku konnte ich leider auch keine Funktion finden, mit der man die Route "abfahren" kann. Weiß jemand, wo der Fehler im Skript liegt?

Mir würde es auch reichen, wenn neben der Routenplanung ein wandernder Punkt die Route auf der Karte (soll das Auto darstellen) "abfährt". Ist das irgendwie ohne allzu große programmiertechnische Kenntnisse möglich?

Gruß, Mathias

 

[wollmaus]

Das Beispiel das du dort gefunden hast ist geschrieben für die API Version2, du lädts aber das Skript für V3 soweit ich es sehe(und der Skript-Part den du geschrieben hast ist auch für V3).

Du müsstest dich für eine Version von beiden entscheiden und den jeweiligen Skriptpart der nicht passt für die andere Version umschreiben(optimalerweise solltest du das Fremdskript in V3 "übersetzen", da V2 deprecated ist)

 

[Berliner84]

Mh, das dacht ich mir schon. Fragt sich nur wie. Gibt es da eine sinnvolle Gegenüberstellung der Funktionen von V2 und V3? Oder gibt es zufällig ein fertiges Beispiel in V3?

 

[wollmaus]

Eine Gegenüberstellung kenne ich nicht, auch keine ähnliche Umsetzung für V3.

Da wir Berliner aber sexy sind;-) und es obendrein für nen guten Zweck ist(hoffe ich), hab ich es mal versucht umzusetzen:

Demo:
http://fiddle.jshell.net/VXGEa/show/

Details:
http://jsfiddle.net/VXGEa/

Ich hab schon mal das mit den mehreren Einsatzfahrzeugen implementiert wo ich schon dabei war.

Falls Fragen sind, frag

 

[Berliner84]

Hey, das ist ja super! Vielen Dank für deine Mühe! Kannst du mir noch verraten, wie ich den Zoomwechsel deaktivieren kann, wenn ich eine Routenführung starte? Sprich, die Karte soll so bei der Position mit der Zoomstufe bleiben, wie ich es eingestellt habe. Hab schon im Code nach "center" und "zoom" gesucht, aber da war wohl nicht das passende dabei.

Ich weiß, ich nutz dich jetzt aus, aber ist es auch möglich, dass mehrere Fahrzeuge unabhängig voneinander von/zu verschiedenen Orten auf der Karte losfahren können? ;-)

Gruß, Mathias

 

[wollmaus]

Ich weiß, ich nutz dich jetzt aus

Da hab ich mir jetzt aber was eingebrockt

Update:
http://fiddle.jshell.net/VXGEa/4/show/
http://jsfiddle.net/VXGEa/4/

Wie du vielleicht schon bemerkt hast, gibt es da ein paar Sachen die man konfigurieren kann.

window.onload=function()
{
  initialize('GRouter',                     //ID des Formular-wrappers
             [52.498, 13.406],              //start-center der Map
             .00005,                        //genauigkeit der Routenabfahrt
             5,                             //Tempo(je kleiner desto schneller)
             document.getElementById('log'),//zielelement für infos
             false,                         //autofit
             11,                            //zoom
             1,                             //multimission
             1                              //test
             );
}?

Kurze Erläuterung dazu:

1. GRouter
   Du findest dort ein DIV mit der ID "GRouter", der Parameter muss also mit der ID dieses DIV übereinstimmen
2. [52.498, 13.406]
   Darüber definierst du das Zentrum der Karte
3. .00005
   je kleiner dieser Wert ist, desto genauer wird die Karte abgefahren. Allerdings bewegen sich die Fahrzeuge auch langsamer, je kleiner du diesen Wert wählst. Das Tempo kannst du aber über den nächsten Wert regeln:
4. 5
   Das ist der Abstand in Millisekunden, in denen die Animation aufgerufen wird. Je kleiner dieser Wert ist, desto schneller bewegen sich die Fahrzeuge(allerdings dürfte ein Wert kleiner als 5 sich kaum noch bemerkbar machen, weil die Browser einen eigenen Minimalwert haben )
5. document.getElementById('log')
   Das Element, in dem die Infos angezeigt werden sollen. Kann ein <ol> oder <ul> sein. Wenn du keine Infos brauchst, schreib da 0 oder false hinein.
6. false
   Das regelt die Anpassung von Kartenzoom/Anzeigebereich an die Routen. Wenn du es nicht willst, dann false, ansonsten true
7. 11
   Zoomfaktor
8. 1
   Das ermöglicht die Nutzung mehrerer Ziele, wenn auf 1. Du hast dann die Möglichkeit weitere Formulare zu Erzeugen für andere Routen. Wenn nur ein Ziel möglich sein soll(wie vorher) gebe dort 0 an
9. 1
   Das dient nur zum Testen und sorgt dafür dass bei der Nutzung mehrerer Ziele das Formularfeld mit der Zieladresse mit einem Zufallswert belegt wird. Wenn du es nicht brauchst, gebe dort 0 ein.
   

 

[Berliner84]

Ist ja genial! Ich weiß gar nicht, wie ich das wieder gut machen soll. Deshalb ist es mir schon fast peinlich, noch einen Wunsch bzw. eine Frage zu stellen. Und zwar fehlt eigentlich nur noch die Möglichkeit, mehrere Fahrzeuggrafiken einzubinden. Neben der Routenführung sollte also eine Auswahl der Fahrzeuge sein, die dann jeweils abfahren. In etwa so:

LHF: (kann die Grafik bleiben, die schon im Code verlinkt ist)
RTW: http://dev.feuerwehr.dortmund.de/up...s/06/17/20/00/00/00/201706/icon_rtw.50x50.jpg

Weitere Fahrzeuggrafiken kann ich dann ja selbst hinzufügen, nur das Prinzip, wie es im Code aussehen müsste, ist mir (wie immer) ein Rätsel.

 

[wollmaus]

Na gut, einen hab ich noch

http://fiddle.jshell.net/VXGEa/7/show/
http://jsfiddle.net/VXGEa/7/

Du findest da zusätzlich zu den Parametern die ich gestern erläutert habe einen neuen, der sieht so aus:

            {
              src: 'http://www.tutorials.de/attachments/javascript-ajax/59566d1329268183-s.gif',
              size:50,
              rect:[27,40],
              ico: {
                    LHF:{t:'Löschhilfsfahrzeug',    r:[40,30]},
                    RTW:{t:'Rettungswagen',         r:[40,30]},
                    NEF:{t:'Notarzteinsatzfahrzeug',r:[40,30]},
                    ELW:{t:'Einsatzleitwagen',      r:[40,30]}                    
                   }
              
             }

Darüber kannst du die Grafiken für das Ziel(also momentan die Flamme) und diverse Fahrzeuge(beliebig erweiterbar)

Anbei mal eine Grafik die das veranschaulichen soll(die Grafik die in der Demo momentan verwendet wird ist der Anhang zu meinem vorigen Posting)

Es wird für alles nur eine einzige Grafik verwendet, ein Sprite.
Stell dir Kacheln vor für die Grafik, 2 Reihen hoch und soviel Spalten breit wie du Fahrzeuge hast(+1 für die Flamme)

1. src
   Die URL des Bildes
2. size
   Die Kantenbreite der Kacheln, hier 50, jedes einzelne Bild kann maximal 50x50px gross sein
3. rect
   Breite und Höhe der Flamme, also des Markers für das Ziel
4. ico
   Eine Liste mit den Icons für die Fahrzeuge, mit folgenden Daten:
   • t
     Name des Fahrzeuges(dient zur Anzeige in der Auswahlliste)
   • r
     Breite und Höhe des Icons
     
     Das Label(LHF, RTW etc.) muss eindeutig sein in dieser Liste.

Für jedes Fahrzeug benötigst du 2 Versionen, eins das nach links fährt(obere Reihe) und eins nach rechts(untere Reihe)

Beachte: jedes Icon muss innerhalb seiner "Kachel" in der oberen rechten Ecke platziert sein.

 

[Berliner84]

Super, danke dir! An den Grafiken muss ich noch ein bisschen üben, damit das auch ins Bild passt, aber ansonsten funktioniert es einwandfrei. Das ist jetzt nämlich auch eine solide Grundlage für mein Leitstellenprogramm, das ich dann in der nächsten Zeit programmieren werde. Hoffentlich funktioniert das mit der Schnittstelle zu Google, so wie ich mir das vorstelle. Also, vielen Dank nochmal. Du hast mir sehr weiter geholfen und deine ganze Arbeit ist nicht selbstverständlich. Danke!