www.gmapsapi.com

Kompleksowy kurs podstaw API, po którym mapowianie nie będzie miało przed Tobą żadnych tajemnic!

Setki przykładów, kursów i poradników z kodem gotowym do skopiowania i korzystania.

Największa strona o Google Maps API w Polsce, największe źródło informacji w języku polskim.

Zmiana rozmiaru mapy przez użytkownika

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

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

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

Oto, co najczęściej czytają internauci, którzy przeczytali ten artykuł:

Dodawanie markerów przez użytkownika

API v2

Poradnik pokazuje, w jaki sposób stworzyć formularz, pozwalający na dodawanie markerów


Kategorie markerów i polilinii

API v2

Stwórz markery/polilinie w kilku kategoriach, a następnie ukrywaj i pokazuj wybrane kategorie


jQuery i Google Maps

API v2

Przyjemne dla oka animacje za pomocą bilbioteki jQuery uatrakcyjnią każdą mapę!


Wyszukiwanie markerów as-you-type

API v2

Jak stworzyć wyszukiwanie i filtrowanie markerów as-you-type przy użyciu bazy danych