Anzeige

Scrollbare Karte mit Speicherung der Koordinaten | Zoom per Maus


#1
Hallo zusammen!

Ich bin neu und muß euch gleich mit einen Problem überfallen, an denen ich mir schon die letzten Wochen die Zähne ausbeiße.

Ich habe einige Projekte in PHP online und merke immer wieder, dass ich der aktuellen Technik etwas hinterherhänge^^ Vor allem im Bereich JS und Ajax lern ich mich gerade erst ein. Allerdings brauch ich Hilfe bei einen Problem, was wohl etwas zu fortgeschritten ist für mich...

Stehe bei JS erst am Anfang - von Ajax brauch ich gar nicht reden...

Ich hab eine Projekt (noch nicht online) dort habe ich einen 4000x4000px großes Div, in welchen ein weiteres Div (#draggable) mit einer Karte ist.
Diese Karte soll bewegt werden können. Momentan löse ich das mit Buttons, welche Margin-Angaben in eine MySQL Datenbank speichert und so wieder ausgibt, das der User wieder an der selben Stelle landet, als wo er die Seite verlassen hat.

Jetzt, wo ihr mich alle ausgelacht habt, würde ich das ganze natürlich eleganter mit der Maus lösen. Also die User sollen die Karte per Maus verschieben können.
Nach gefühlten tausend Stunden bei Google hab ich mir jetzt auch ein Script mehr oder weniger durch Schnipsel und selbst probieren zusammengestellt, was auch funktioniert:

Javascript:
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
  } );
  </script>
Die Karte wird im DIV draggable bewegt... (y)

Was ich aber absolute nicht hinbekomme, dass die Koordinaten(?) der letzten Platzierung ausgelesen werden, sodaß ich diese entweder in einer Textdatei, in einem Cookie oder in der Datenbank abspeichern kann.
Wenn ich dies hinbekommen, müßte ich diese auch wieder einlesen können, damit der User an der gleichen Stelle landet, als er die Seite aktualisierte oder die Seite verließ. Denn jedesmal wenn der User auf ein Objekt auf der Karte klickt, springt er logischerweise wieder zurück ins linke obere Ecke mit obigen Script.


Das wäre mein erstes Problem - vielleicht kennt da einer eine schnelle Lösung oder hat einen Link zu einen verständlichen Tutorial zur Hand. Ich habe leider nichts gefunden :(


Was mich auf interessieren würde, ist das scrollen der Karte per Mausrad - dies hab ich auch wieder mit Buttons und CSS-Angaben gelöst... auch hier würde ich mich über Links, Tipps, Codeschnipsel freuen, um eine elegante Lösung zu finden! :D

vielen Dank!
 

Sempervivum

Erfahrenes Mitglied
#2
dass die Koordinaten(?) der letzten Platzierung ausgelesen werden
Das ist der leichtere Teil der Übung, denn es ist in der Docu beschrieben:
http://api.jqueryui.com/draggable/#event-drag
damit der User an der gleichen Stelle landet, als er die Seite aktualisierte oder die Seite verließ
Anscheinend stellt das Plugin keine Methode zur Verfügund, um das Objekt zu positionieren. Beobachtet man jedoch das CSS, erkennt man, dass die Eigenschaften top und left verändert werden und anders herum kann man das Element positionieren, indem man diese Eigenschaften setzt. Hier ein kleines Demo, mit dem ich es überprüft habe:
Code:
        <div id="draggable">Drag me</div>
        <button id="posbtn">Position</button>


        <script>
        $( "#draggable" ).draggable();
        $("#posbtn").on("click", function() {
            $("#draggable").css({top: "100px", left: "200px"});
        });
        </script>
Außerdem musst Du die Position irgend wie speichern und dafür bietet sich Localstorage an:
https://wiki.selfhtml.org/wiki/JavaScript/Web_Storage
Damit hast Du alles, um dein Vorhaben, die Position nach einem erneuten Laden der Seite wiederherzustellen, umzusetzen.

Zu der zweiten Frage: Meinst Du hier wirklich scrollen oder eher zoomen? Weil scrollen könnte man mit dem Mausrad ja nur in einer Richtung, entweder horizontal oder vertikal.
 
#3
Hallo Sempervivum,
vielen Dank für deine Links und Erklärungen! Probier ich nachher gleich rum! :)

Ja, ich meine natürlich zoomen ;) Also nah ran und weiter weg ;)
 

Sempervivum

Erfahrenes Mitglied
#5
PS: Da gibt es eine Demo mit Panning und Zooming. Wenn man sich danach richtet, ist es kinderleicht und mit wenigen Zeilen Javascript getan:
Code:
    <div id="cpanzoom">
        <div id="innerpanzoom">
            <img src="images/dia0.jpg">
        </div>
    </div>
    <script>
        var $panzoom = $("#innerpanzoom").panzoom();
        $("#cpanzoom").on('wheel', function (e) {
            e.preventDefault();
            var delta = e.originalEvent.deltaY;
            var zoomOut = delta < 0;
            $panzoom.panzoom('zoom', zoomOut, {
                increment: 0.1,
                animate: false,
                focal: e
            });
        });
    </script>
 
#7
So, ich hab mir alles mal angeschaut und mit Hilfe der Demo hab ich es auch übertragen können...

Ich muß noch viel lernen.. wie erstellt man z.B. diese js-Dateien die man für die Scripte braucht? Das ist alles viel Script und Dateien für so eine kleine Funktion^^

Als nächsten knöpf ich mir die Sache mit dem speichern vor.. obwohl ich da bis jetzt null durchsehe^^
 

Sempervivum

Erfahrenes Mitglied
#8
Freut mich zu lesen, dass es funktioniert!
Solche Bibliotheksfunktionen zu erstellen erfordert schon ziemlich fortgeschrittene Kenntnisse. Beim Programmieren ist es häufig so, dass die Programmierung relativ aufwändig ist, obwohl sich die Aufgabe relativ kurz und leicht beschreiben lässt.
 

Sempervivum

Erfahrenes Mitglied
#10
Bevor Du endlos suchst und probierst, sieh dir dies an:
Javascript:
        var $panzoom = $("#innerpanzoom").panzoom()
            .on("panzoomchange", function(e, panzoom, transform) {
                localStorage.setItem("matrix", JSON.stringify(transform));
            });
        $("#cpanzoom").on('wheel', function (e) {
            e.preventDefault();
            var delta = e.originalEvent.deltaY;
            var zoomOut = delta < 0;
            $panzoom.panzoom('zoom', zoomOut, {
                increment: 0.1,
                animate: false,
                focal: e
            });
        });
        var lsitem = localStorage.getItem("matrix");
        if (lsitem) $panzoom.panzoom("setMatrix", JSON.parse(lsitem));
 
#11
Oh, vielen Dank.. ich fummle zwar gern selbst rum, um die Sachen auch halbwegs zu verstehen, aber jetzt kann ich dass an einen lebenden Objekt testen!

Hab's jetzt noch angepasst und es macht was es soll! Vielen Dank! Vorher hats die gesamte Seite mit verschoben, aber jetzt nur den Div-Inhalt wie es sein soll..

Sag mal.. lässt sich damit auch die "Schiebegeschwindigkeit" einstellen? Geht das?
 
Anzeige

Neue Beiträge

Anzeige