JS für Google Maps-ähnliche Anwendung?

multimolti

multimolti

Erfahrenes Mitglied
Hallo!

Für mein Browsergame würde ich gerne eine Karte einbauen, die ähnlich wie bei Google Maps funktioniert - Man kann hin- und herdraggen, rein- und rauszoomen, auf einzelne Bereiche klicken. Bisher habe ich das anders gelöst (man hat einfach eine Karte und Pfeile in jede Richtung, bei Klick auf einen Pfeil wird die Karte mit dem neuen Ausschnitt neu geladen), aber das war nicht so benutzerfreundlich.
Jetzt würde ich wie gesagt, gerne etwas wie bei Google Maps einbauen. Dazu habe ich schon OpenLayers gefunden, aber das sieht etwas nach over-kill aus.
Gibt es für sowas ein einfaches und kleines Script? Und wenn, wie sollten dann die Daten, die das Script bekommt, aussehen?

Danke für eure Hilfe!


## EDIT ##

Ich habe mal weiter gesucht und ein Tutorial für "Draggable Elements" gefunden, das hilft mir schon mal weiter. Einen Zoom habe ich einfach mal so realisiert, dass ich die größe des Bildes beim reinzoomen einfach verdopple, dann muss der Browser das rendern, beim rauszoomen halbiere.
So sieht das aus: http://multimolti.de/test/dragmap/testmap1.html

Funktioniert leider nicht ganz so schön wie gehofft:
  • Wenn man reinzoomt, das Bild so verschiebt, dass man die linke untere Ecke sieht, dann wieder rauszoomt, verschwindet es komplett
  • Im Firefox ruckelt das total, der kommt damit irgendwie nicht klar, in Chrome läuft es allerdings flüssig
  • Im IE 8 läuft es erstaunlicherweise besser als in Firefox, ist auf meinem PC recht brauchbar (Pentium 4 mit 3.2GHz)
  • Wenn man reinzoomt, dragt, rauszoomt, dann ist das Bild manchmal nicht mehr komplett in der Box, sobald man es dann anklickt, springt es rum
Ist also nicht perfekt, aber schon mal ein Anfang. Hat jemand eine Idee, wie ich das besser hinbekomme?
 
Danke für die Antwort, aber ich glaube, du verstehst das falsch. Ich will keine echte Weltkarte, sondern nur eine kleine, imaginäre Karte von einer Stadt mit Häusern, Straßen und Parks, die man dann Anklicken kann...
 
Ich kann dir natürlich kein fertiges Script liefern, aber wenn ich mir googleMaps anschaue, dann läd er letztendlich immer nur einzelne Quadrate mit einem Bild.
Ich würde wie folgt vorgehen:

1. Deine Karte in ein Raster aufteilen. (z.b. 50 x 50 px große Quadrate, o.ä.), dabei musst du dir eine logische Nummerierung und somit Bezeichnung der einzelnen Bilder ausdenken. (z.B. Bild in Spalte 2 und Zeile 15 = 2_15.jpg)

2. Per CSS immer 5 x 5 dieser Quadratischen Bilder zu einem großen Quadrat neben bzw. untereinander anordnen und diese in einen festen Div setzen.

3. JS bauen, dass per Drag&Drop die Bilder als Gesamtes verschiebt (z.B. in dem du die Bilder selbst auch nochmal in ein Div setzt, das sich verschieben lässt). Dann eine Abfrage auf x / y Koordinaten erstellen, die prüft, ob sich der Bildbereich außerhalb des umliegenden Div Rahmens befindet, wenn dies der Fall ist, blendest du das außerhalb liegende Bild aus und lädst dir das nächstfolgende Bild auf der anderen Seite nach. Für das Nachladen musst du natürlich dann deine vorher entwickelte Bezeichnungslogik für die Bilder benutzen, damit du weißt, welches Bild geladen werden muss.

4. Für eine Zoom-Funktion musst du dann lediglich die Variablen im JS ändern, die dann zum Beispiel anstelle von 5x5 Bilder immer 15x 15 Bilder anzeigen oder aber nur 3x3 etc. (Die Bilder müssen dementsprechend dann verkleinert oder vergrößert angezeigt werden)

Hoffe ich konnte dir einen gewissen Denkanstoß geben.

Liebe Grüße
Micha
 
Die Idee ist gut, ich mache mich mal ran...

Habe das erst noch mal anders versucht, und zwar so:
http://multimolti.de/test/dragmap/testmap2.php

Ist ne große Tabelle, die einzelnen Bilder sind anklickbar, und das ganze kann man verschieben. Gibt aber immer noch Probleme:
  • Ruckelt in Firefox schlimmer als zuvor, in Chrome aber gehts glatt
  • Wenn man draggt, loslässt und die Maus noch über der Karte ist, kommt das Alert trotzdem
  • In Chrome kann ich nach dem ersten Laden nicht draggen, muss erst mal Refresh drücken
Mal schauen, was ich jetzt mache...

EDIT:
Version 3 ist da: http://multimolti.de/test/dragmap/testmap3.php
Änderungen: Nur noch "echte" Klicks werden als Klicks angesehen, wenn man draggt kommen keine Alerts mehr. Außerdem habe ich einen (sehr primitiven) Zoom eingebaut. Das ganze funktioniert allerdings immer noch nicht so wie es soll:
  • In Chrome geht der Zoom nicht (es passiert einfach gar nichts, Debug sagt auch keine Fehler)
  • Im Firefox geht das Klicken jetzt nicht mehr
  • Internet Explorer kann alles beides (wow!), aber ruckelt dafür
Kann mir jemand helfen?
 
Zwecks Firefox: clientX/Y gibt es dort nicht. Hier musst du pageX/Y benutzen - und jawoll, das gibt es wiederum im IE nicht. Da musst du dir eine Browserweiche basteln. :)

*edit*
Eventuell ist das auch der Grund, warum es im Chrome nicht funktioniert? :confused:
Würde mich aber wundern, wenn er durch eine ihm nicht bekannte Variable gleich das komplette Skript abwürgt...
 
Zuletzt bearbeitet:
-.- Ich hasse diese verschiedenen Browser... können die sich mal einig werden, was sie implementieren und wie?
Naja, danke, ich werde das mal ändern...

EDIT:
Browserweiche eingebaut, vielen Dank! Klicken geht jetzt in allen drei Browsern. Das mit dem Zoomen muss ich mir noch mal anschauen

EDIT 2:
Opera ist momentan echt am überzeugendsten! Da geht alles, Zoomen, Klicken, draggen ohne ruckeln... was will man mehr? Aber ich kann meine Spieler ja schlecht zwingen, Opera zu benutzen...
http://multimolti.de/test/dragmap/testmap4.php <-- neuste Version
 
Zuletzt bearbeitet:
Um nochmal zu Chrome zu kommen.

Für mich sieht es aus, als ob es sich da um einen Bug handelt.

Diese Zeile ist das Problemkind:
Code: 
document.styleSheets[S][cssRules][R].style[element] = value;

Chrome (bzw. WebKit allgemein?) ändert den CSS-Wert nicht. Man kann ihn auslesen, jedoch nicht verändern - zumindest ist es mir nicht gelungen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück