Zmiana rozmiaru mapy przez użytkownika
W tym odcinku zademonstruję działanie obiektu GDraggableObject(), dzięki któremu w prosty sposób można stworzyć suwak, służący do zmiany rozmiaru mapy.
GDraggableObject
Ta klasa dodaje możliwość przesuwania za pomocą myszy obiektu, przekazanego w pierwszym argumencie przy wywołaniu konstruktora. Ogólna składnia wygląda następująco:
var obiektPrzeciagany = new GDraggableObject(kontener,opcje);
gdzie kontener to obiekt w strukturze DOM, który będzie przeciągalny. Drugi argument jest opcjonalny, ale jego użycie będzie niezbędne w tym kursie. Za jego pomocą możemy przekazać szereg opcji - w tym tutorialu skorzystamy jedynie z dwóch: left i top - odpowiadają one za początkowe pozycje w poziomie i pionie przeciąganego obiektu.
Obiekty typu GDraggableObject() posiadają dwie metody, dzięki którym można zmienić kursor myszy w trakcie przeciągania oraz po najechaniu na obiekt. Metody te to:
- setDraggableCursor(kursor) - ustawia kursor, wyświetlany w trakcie przesuwania na określony w pierwszym argumencie
- setDraggingCursor(kursor) - ustawia określony w pierwszym argumencie kursor jako wyświetlany, gdy mysz jest nad obiektem
Kursor określany jest za pomocą stringa, identyfikującego go tak samo, jak w języku CSS: przykładowe poprawne wartości to 'pointer', 'crosshair', 'all-scroll' itp.
Ostatnią informacją, która będzie potrzebna w celu umożliwienia zmiany rozmiaru mapy są zdarzenia, jakie odpala obiekt GDraggableObject(). Dwa najważniejsze to:
- drag - odpalana ciągle w czasie przeciągania obiektu
- dragend - odpalana, gdy obiekt przestał być przeciągany
Wyposażeni w taką wiedzę, możemy napisać odpowiedni skrypt:
Kod
var mapa = new GMap2(document.getElementById('mapka'));
mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),8,G_SATELLITE_MAP);
wstawRozciagacz(mapa);
Funkcja wstawRozciagacz() odpowiadać będzie za dodanie przeciąganego obiektu i ustawienie odpowiednich nasłuchów. Oto ona:
function wstawRozciagacz(mapa)
{
var div = document.createElement('div');
div.style.width = '10px';
div.style.height = '10px';
div.style.background = 'red';
mapa.getContainer().appendChild(div);
var rozciagacz = new GDraggableObject(div,{left: 600, top: 400});
rozciagacz.setDraggableCursor('se-resize');
GEvent.addListener(rozciagacz,'drag',function()
{
mapa.getContainer().style.width = rozciagacz.left+'px';
mapa.getContainer().style.height = rozciagacz.top+'px';
});
GEvent.addListener(rozciagacz,'dragend',function()
{
mapa.checkResize();
});
return rozciagacz;
}
W liniach 3-6 tworzony jest obiekt blokowy (div), o wymiarach 10px na 10px i kolorze czerwonym. Następnie w linii 7 dodajemy go do kontenera mapy (odwołanie do mapy przekazywane w pierwszym argumencie funkcji wstawRozciagacz(). Następnie w linii 9 za pomocą klasy GDraggableObject() umożliwiamy przesuwanie stworzonego przed chwilą diva. Określamy także początkową pozycję na taką, jakie są początkowe wymiary kontenera z mapą. Później w linii 9 ustawiamy kursor, wyświetlany w momencie gdy mysz jest nad obiektem na kursor rozszerzania po skosie (se-resize).
Zdarzenie drag powoduje zmianę rozmiaru kontenera mapy. Kiedy przeciąganie zostaje zakończone, wykonujemy sprawdzenie, czy rozmiar mapy zmienił się (mapa.checkResize()) - API wykona wówczas niezbędne do prawidłowego działania przeliczenia, dzięki którym po zmianie rozmiaru obrazki będą się wczytywać poprawnie.
I to tyle, działanie skryptu możesz sprawdzić w przykładzie 1: przykład 1pokaż kod przykładu
Inne dostępne kursory
Lista kursorów, dostępnych w języku CSS, które możesz użyć na tej samej zasadzie jak w przykładzie 27.1 znajduje się pod tym adresem:
http://www.echoecho.com/csscursors.htm