Hallo Leute,
ich habe anscheinend ein allgemeins Verständnis Problem in Verbindung mit JavaScript und "Objekten". Ich beschreibe das Problem an meinem praktischen Einsatz mittels der Google Maps JS-API (v3). Dies soll nur zur Veranschaulichung dienen aber Ihr müsst euch damit nicht auskennen.
Also es geht darum mehrere Routen zu erstellen. Diese werden dargestellt und es soll sich ein Fahrzeuge je route bewegen.
Wenn man eine Routenanimation nach der anderen ausführt, dann funktioniert das schon wunderbar. Im folgenden Bild ist die erste Routenanimation schon durchgelaufen und die Zweite im Gange:
Das Problem:
Wenn ich eine weitere Route ausführe während die andere Route noch animiert wird dann wird nur ein Fahrzeug animiert, dieses springt auf der Strecke aber "umher" und das zweite Fahrzeug bleibt stehen und bewegt sich nicht auf seiner Strecke.
-> Es wird hier die gleiche Funktion simulateRoute(inputCounter) aufgerufen, wobei der inputCounter das Inputfeld angibt wo sich die Adressen befinden (Start und Ziel für die Route). Anscheinend verwendet JavaScript hier die gleichen Variablen wodurch es zu Überschneidungen kommt.
Bisher probiert:
- ich bin noch nicht sehr vertraut mit JS, doch lag es für mich schnell auf der Hand, dass natürlich die gleichen Objekte verwendet werden und somit die Werte überschrieben werden von einer Route zur anderen.
- Da JS objektbasiert ist und nicht objektorientert - wo man bei OOP einfach für jede Route ein Objekt anlegt wodurch sich die Werte nicht überschreiben sollte wäre der Fall gelöst, aber es gibt ja kein OOP
- Somit probierte ich das Framework prototype, welches mir Klassen bot. Somit habe ich eine Klasse für jede neue Route und deren Animation angelegt die auf das gleiche Karten-Objekt zugreifen -> doch auch dort tritt wieder das Problem auf dass nur eine Route anmiert werden kann und die andere Route beim animieren "springt".
Somit meine Frage:
- Wie ist es möglich, eine Funktion zeitglich parallel auszuführen ohne dass sie sich gegenseitig stören? Also allgemein in JS, auch ohne dem Framework prototype
- Gibt es dazu vielleicht einen Synchronisationsmechansmus, Threads... oder wie löst man das in der Praxis?
- Es kann ja nicht sein, dass ich für jede neue Route eine neue Funktion anlegen muss die das Gleiche macht...?
LG,
Steph
//edit:
Vielleicht hilft ein bisschen Code zur Veranschaulichung
Erklärung zum Code: bei initialize() wird die Karte geladen und bei simulateRoute() dann die neue Route berechnet und animiert.
==> Kann es sein, dass ich bei simulateRoute die Objekterzeugung anders handhaben muss?
ich habe anscheinend ein allgemeins Verständnis Problem in Verbindung mit JavaScript und "Objekten". Ich beschreibe das Problem an meinem praktischen Einsatz mittels der Google Maps JS-API (v3). Dies soll nur zur Veranschaulichung dienen aber Ihr müsst euch damit nicht auskennen.
Also es geht darum mehrere Routen zu erstellen. Diese werden dargestellt und es soll sich ein Fahrzeuge je route bewegen.
Wenn man eine Routenanimation nach der anderen ausführt, dann funktioniert das schon wunderbar. Im folgenden Bild ist die erste Routenanimation schon durchgelaufen und die Zweite im Gange:
Das Problem:
Wenn ich eine weitere Route ausführe während die andere Route noch animiert wird dann wird nur ein Fahrzeug animiert, dieses springt auf der Strecke aber "umher" und das zweite Fahrzeug bleibt stehen und bewegt sich nicht auf seiner Strecke.
-> Es wird hier die gleiche Funktion simulateRoute(inputCounter) aufgerufen, wobei der inputCounter das Inputfeld angibt wo sich die Adressen befinden (Start und Ziel für die Route). Anscheinend verwendet JavaScript hier die gleichen Variablen wodurch es zu Überschneidungen kommt.
Bisher probiert:
- ich bin noch nicht sehr vertraut mit JS, doch lag es für mich schnell auf der Hand, dass natürlich die gleichen Objekte verwendet werden und somit die Werte überschrieben werden von einer Route zur anderen.
- Da JS objektbasiert ist und nicht objektorientert - wo man bei OOP einfach für jede Route ein Objekt anlegt wodurch sich die Werte nicht überschreiben sollte wäre der Fall gelöst, aber es gibt ja kein OOP
- Somit probierte ich das Framework prototype, welches mir Klassen bot. Somit habe ich eine Klasse für jede neue Route und deren Animation angelegt die auf das gleiche Karten-Objekt zugreifen -> doch auch dort tritt wieder das Problem auf dass nur eine Route anmiert werden kann und die andere Route beim animieren "springt".
Somit meine Frage:
- Wie ist es möglich, eine Funktion zeitglich parallel auszuführen ohne dass sie sich gegenseitig stören? Also allgemein in JS, auch ohne dem Framework prototype
- Gibt es dazu vielleicht einen Synchronisationsmechansmus, Threads... oder wie löst man das in der Praxis?
- Es kann ja nicht sein, dass ich für jede neue Route eine neue Funktion anlegen muss die das Gleiche macht...?
LG,
Steph
//edit:
Vielleicht hilft ein bisschen Code zur Veranschaulichung
HTML:
[...]
<script type ="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
var simulationMap = null;
var self = null;
var self_forDirectionsService = null;
var self_forMarker = null;
function initialize()
{
var simulationMapObj = new SimulationMap();
simulationMap = simulationMapObj.getMap();
}
function simulateRoute(inputCounter)
{
var route = new createRoute(simulationMap, inputCounter);
route.calcRoute();
}
// Class Marker creates an Google Maps Marker and returns it.
var Marker = Class.create({
[...]
});
// Class SimulationMap
var SimulationMap = Class.create({
[...]
});
// Class createRoute
var createRoute = Class.create({
[...]
});
</script>
HTML:
<body onload="initialize()">
<div id="map_canvas" style="width:80%;height:100%; float: left;"></div>
<div id="tools" style="flaot: left; padding: 10px;">
Startadresse:
<input type="text" name="start1" id="start1" value="an der hauptfeuerwache 8, münchen"/><br />
Zieladresse:
<input type="text" name="end1" id="end1" value="lothstraße 64, münchen"/>
<input type="submit" onmouseover="simulateRoute('1');"/>
<br/>
<br/>
Startadresse:
<input type="text" name="start2" id="start2" value="an der hauptfeuerwache 8, münchen"/><br />
Zieladresse:
<input type="text" name="end2" id="end2" value="friedenstraße 40, münchen"/>
<input type="submit" onmouseover="simulateRoute('2');"/>
</div>
</body>
</html>==> Kann es sein, dass ich bei simulateRoute die Objekterzeugung anders handhaben muss?
