Poznaj Google Maps API

Zdarzenia

« powrót do listy kategorii

W tej części kursu nauczysz się, jak sprawnie przechwytywać różne zdarzenia z mapy. Dzięki nim będziesz w stanie wykonać rzeczy gdy:

• zostanie wciśnięty lewy przycisk myszy
• zostanie podwójnie kliknięty lewy przycisk myszy
• użytkownik kliknie na markerze
• zmieni się pole widzenia mapy

i wiele, wiele innych

Ogólna struktura przechwytywania zdarzeń

Do obsługi zdarzeń używa się funkcji addListener() z przestrzeni nazw GEvent.

Funkcja GEvent.addListener() przyjmuje trzy argumenty:

• pierwszy to obiekt, którego tyczy się zdarzenie
• drugi to string - rodzaj zdarzenia (patrz tabelka niżej)
• trzeci to funkcja, która zostanie wywołana po wykryciu zajścia zdarzenia

Zazwyczaj, funkcja podana jako trzeci argument zostanie wywołana bez żadnego, z jednym lub z dwoma argumentami, zależnymi od rodzaju zdarzenia

Wybrane dostępne zdarzenia

Poniższa tabela przedstawia zestawienie najczęściej używanych zdarzeń, oraz przekazywanych argumentów.

Dla obiektu mapy (GMap2)

Wybrane zdarzenia dla obiektu markera (GMarker)

Wybrane zdarzenia dla obiektu polilinii (GPolyline) oraz poligonu (GPolygon)

Zasady tworzenia polilinii zostały omówione w następnym rozdziale

Przykład 1 - zdarzenie click

Przykładowe dodanie obsługi zdarzenia kliknięcia na mapę

GEvent.addListener(mapa,'click',function(marker,punkt) {
	if(marker)
	{
		mapa.removeOverlay(marker);
	}
	else if(punkt)
	{	
		var marker = new GMarker(punkt;
		mapa.addOverlay(marker);
	}
});

W tym przykładzie tworzymy obsługę zdarzenia kliknięcia na mapę. Jeśli kliknięto na marker, zostanie on usunięty z mapy (funkcja removeOverlay()). Jeśli kliknięto na pole bez markera, to dodamy nowy marker na mapie w tym punkcie.

W celu uatrakcyjnienia przykładu, każdy marker jest dodawany z losową ikoną z literką. Przy dodawaniu/usuwaniu markerów zmieniana jest odpowiednio wartość globalnej zmiennej ilosc, dzięki której pod mapą można wyświetlić licznik markerów.

Zobacz cały kod i jego efekt w przykładzie: przykład 1pokaż kod przykładu

UWAGA! Ze względu na bug w Google Maps, w przeglądarce IE8 przykład ten działa niepoprawnie - markery nie są dodawane w miejscu kliknięcia. Obejście tego problemu przedstawiono na dole strony, w przykładzie 6.

Przykład 2 - zdarzenie dragend

W kolejnym przykładzie pokazałem zastosowanie zdarzenia dragend - przeciągnij marker, dodany na mapę - po skończeniu przeciągania w pasku pod mapą pojawią się współrzędne markera: przykład 2pokaż kod przykładu

Przykład 3 - zdarzenie addoverlay

Z tabelki na początku artykułu wynika, że zdarzenie addoverlay dla mapy GMap2 zwraca obiekt, dodany na mapę. Przechwytując to zdarzenie będziemy w stanie wyświetlić jego współrzędne:

GEvent.addListener(mapa,'addoverlay',function(marker)
{
	alert('Dodano marker w punkcie '+marker.getPoint());
});

Przykład może nie jest w pełni praktyczny (tę samą funkcjonalność można było osiągnąć poprzez dodanie alerta tuż za dodaniem markera), lecz pokazuje, że kreatywność w korzystaniu ze zdarzeń nie ma właściwie granic. Oto przykład: przykład 3pokaż kod przykładu

Ręczne "odpalanie" zdarzeń

Jeśli chcesz zasymulować wykonanie pewnego zdarzenia, musisz posłużyć się funkcją trigger(obiekt,zdarzenie) z przestrzeni nazw GEvent. Przykładowo:

GEvent.trigger(marker,'dragend');

Spowoduje wykonanie akcji, które wcześniej podpięliśmy do zdarzenia dragend. Przykład 4 to modyfikacja przykładu 2, w której współrzędne markera wyświetlane są na starcie aplikacji, dzięki zastosowaniu tego fragmentu kodu: przykład 4pokaż kod przykładu

Kolejność zdarzeń

Hierarchia wykonywania zdarzeń jest inna niż alfabetyczna, zaprezentowana w tabelce. Przykład 5 ma ustawione logowanie wszystkich zdarzeń, dzięki czemu możesz zobaczyć, co tak naprawdę dzieje się, gdy klikasz myszką lub przesuwasz kursor. przykład 5pokaż kod przykładu

• W przykładzie 4 użyto funkcji GLog.write() do tworzenia logów. Jest ona bardzo przydatna w procesie debugowania aplikacji, napisanej przy użyciu Google Maps API
• Zwróć uwagę, że podwójne kliknięcie lewym przyciskiem myszy dblclick jest poprzedzone dwukrotnym zdarzeniem click. W swoim czasie zobaczysz, jak obejść ten problem.

Poprawka bugu w IE8

W Internet Explorer 8, zdarzenie kliknięcia click przekazuje niewłaściwe współrzędne. W skutek tego, jeśli internauta próbuje uruchomić przykład numer 1 z tego poradnika i klika na mapę, to markery wstawiane są w niewłaściwych współrzędnych. Aby obejść ten problem, trzeba napisać specjalny kod, wykrywający wersję IE8 i jeśli stwierdzimy, że mamy do czynienia z IE8 to zamiast tworzyć marker w punkcie, który otrzymaliśmy w wyniku kliknięcia będziemy tworzyć marker w punkcie, w którym znajduje się kursor myszy, wykorzystując zdarzenie mousemove. Funkcja do wykryca IE8:

var ie_wersja = false;
if (navigator.appName == 'Microsoft Internet Explorer')
{
	var ua = navigator.userAgent;
	var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
	if (re.exec(ua) != null)
		ie_wersja = parseFloat(RegExp.$1);
}

Na początku kodu dodajemy następującą linijkę:

var ie_punkt = null;

Zmienna ie_punkt będzie służyła do pamiętania współrzędnych myszy. Odświeżamy ją następująco:

if(ie_wersja = 8)
{
	GEvent.addListener(mapa,'mousemove',function(punkt)
	{
		ie_punkt = punkt;
	});
}

(sprawdzamy, czy mamy do czynienia z IE8 i jeśli tak, to przechwytujemy zdarzenie poruszania myszą i uaktualniamy wartość zmiennej ie_punkt. Mając ją, wystarczy zdarzenie click zmodyfikować w sposób następujący:

GEvent.addListener(mapa,'click',function(marker,punkt) {
	if(marker)
	{
		mapa.removeOverlay(marker);
		ilosc--;
	}
	else if(punkt)
	{	
		if(ie_wersja == 8)
			punkt = ie_punkt;
		var marker = new GMarker(punkt,{icon: pobierzIkone()});
		mapa.addOverlay(marker);
		ilosc++;
	}
	uaktualnijStatus();
});

by całość zaczęła poprawnie działać w IE8 (sprawdź poniższy przykład):przykład 6pokaż kod przykładu

Przejdź do kolejnej części kursu

Tytuł następnej części kursu to Polilinie

• 1.Pierwsza mapa
• 2.Dodawanie znaczników na mapę
• 3.Zmiana domyślnej ikony znacznika
• 4.Popularne, darmowe ikony dla markerów
• 5.Wyświetlanie informacji na mapie
• 6.Wbudowane kontrolki i sterowanie
• jesteś tu!Zdarzenia
• 8.Polilinie
• 9.Obliczenia
• 10.Wczytywanie danych z pliku XML
• 11.Geokodowanie adresów
• 12.Optymalizacja wyświetlania dużej ilości znaczników
• 13.Debugowanie skryptów dla początkujących