Maps wie googelmaps bewegen

Hallo,

Ich würde gerne wissen wie man eine Karte für eine Browsergame (wie z.b die bei Travian) mit der Maus bewegen kann so wie auf http://maps.google.de/ .

Man drückt auf die Maustaste und "schiebt" dann, nennt man auch Drag & Drop.

Ne, mal Scherz beseite: GoogleMaps verwendet eine Kombination aus eben o.g. Javascript für das Drag&Drop (also Erkennung Maus runter, Maus "rauf und die daraus entstandene Differenz bzw. sogar während des Bewegens) und Ajax für das (intelligente) Nach- und Vorladen der Kartenauschnitte, die noch gar nicht sichtbar sind.

Da gibt es aber hier im Forum bereits etwas zu, bsp. http://www.galaxy-news.de/groups/2_entwickler/forums/233_grafische_karten.html?pos=1 wenn ich mich recht erinnere.

Habe leider keine berechtigung um auf diese Seite zu kommen kann mir jemand das relevante rauskopieren?

Warum bewirbst du dich nicht einfach für den Entwicklerbereich, wenn du Interesse an solchen Themen hast?

Im Buch "Pragmatic Ajax - A Web 2.0 Primer" wird in Kapitel 4 bechrieben wie man ein Google Maps aehnliches Script bauen kann. Kann Dir das Kapitel kopieren wenn Du willst.

Original von cherry

Im Buch "Pragmatic Ajax - A Web 2.0 Primer" wird in Kapitel 4 bechrieben wie man ein Google Maps aehnliches Script bauen kann. Kann Dir das Kapitel kopieren wenn Du willst.

Ja das wäre super wen du dir die mühe machen würdest.

Warum bewirbst du dich nicht einfach für den Entwicklerbereich, wenn du Interesse an solchen Themen hast?

Damals musste man immer referenzen haben usw. keine ahnung ob sich das mitlerweile geändert hat.

Einfach herauskopieren geht nicht.. aber das grundsätzliche Prinzip geht so: Du machst ein Raster mit Karten; wenn du nach rechts schiebst, dann schiebst du in Wirklichkeit alle Raster eins nach links bzw. gaukelst dem Benutzer das vor (mal Stichwort CSS-overflow:hidden). Zusätzlich musst du mit Ajax aber bereits jeweils mindestens ein Raster mehr (bei 9 sichtbaren Rastern bei einem 3x3 wären das 14 Raster) vorladen, damit das Verschieben mehr "seamless" ist.

Wenn ich mich recht erinnere, ist bei den Pattern auf Yahoo Dev dieses Prinzip auch ausführlich erklärt; ich glaube, ein "fertiges" Script gibt es aber nicht.

Not sure if I'm understanding this correctly, but do you mean something like:

http://testing.neuroninteractive.com/ ? :-)

Original von Daedeloth

Not sure if I'm understanding this correctly, but do you mean something like:

http://testing.neuroninteractive.com/ ? :-)

Naja, das ist ein ähnlicher, aber anderer, Ansatz:

1. load all images
2. generate/build the map defined by params (images already loaded)

Aber das Prinzip ist das gleiche. Wenn das bei dir ausreicht, ist das natürlich performanter. Bei GoogleMaps geht das nicht, weil nun mal das nächste Haus anders aussieht ;)

Original von knalli

ich glaube, ein "fertiges" Script gibt es aber nicht.

An sich nimmt einem schon ein JS Framework die ganze Arbeit ab. Ich habe für eine solche Map immerhin ca. 3 Zeilen JS Code (wenn man es auf die Karte ohne Funktionen wie klicken beschränkt). Einfach ein Draggable auf den Container machen welcher sich wiederrum wie schon erwähnt wurde in einem anderem Container mit overflow:hidden befindet. Bei dem Draggable dann noch eine Funktion definieren, wenn der Container verschoben wurde und die neue Position des Containers an ein PHP Script übermitteln, welches den Rest erledigt und in mienem Fall JSON an den Browser zurück gibt, welcher dann wiederrum den Container um die neuen Elemente erweitert und zusätzlich noch alte Elemente entfernt.

Das schwierigste dabei ist eigentlich den PHP Code so zu Formen das immer die richtigen Felder übergeben werden und immer die richtigen gelöscht werden. Weil es passiert schnell das nach bissl navigieren nichts mehr zusammen passt.

(zugegebener Masen habe ich aber in dem Core des JS Frameworks, was ich verwendete 4 Zeilen umgeschrieben)

P.S.: Zum Thema fertiges Script. Hatte schonmal überlegt eins zu veröffentlichen, aber dann gibt es irgendwann noch XNova mit so ner Karte - nein danke

wir verzichteten bei unserem spiel Uniteria.de (mit dem Demo Account kannst du dir alles unverbindlich anschauen) komplett auf ein fremdes Framework und haben unser eigenes geschrieben. funktioniert aber im grunde genauso wie oben bereits beschrieben.

zusätzlich gibts noch echtzeitbewegungen auf der karte, sprich, gegner und mitstreiter bewegen sich auf der karte und werden ebenfalls beim drag and drop mitbewegt.

als wir erstmal den dreh raus hatten, gings ganz schnell und das zufügenen weiterer objekte ist ein klacks.