Poznaj Google Maps API

Obsługa klawiatury

« powrót do listy poradników

API Google Maps umożliwia przechwytywanie i obsługę zdarzeń, następujących po wciśnięciu dowolnego klawisza na klawiaturze. W tej części kursu dowiesz się, jak można to osiągnąć.

Włączenie obsługi strzałek

Google Maps API ma wbudowaną obsługę przesuwania mapy za pomocą strzałek na klawiaturze. Aby podpiąć obsługę tych klawiszy do twojej mapy, wystarczy, że stworzysz nowy obiekt klasy GKeyboardHandler, którego konstruktor przyjmuje jeden argument - odwołanie do obiektu mapy, która ma być obsługiwana:

mapa = new GMap2(document.getElementById('mapka'),{mapTypes: [G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP]});
mapa.setCenter(new GLatLng(53.41935400090768,14.58160400390625),10);   
new GKeyboardHandler(mapa);

Niestety, to nie wszystko. Jeśli pozostawisz kod w takiej postaci, to mapa będzie obsługiwać strzałki, ale tylko wtedy, jeśli wcześniej ustawisz jej focus, np. klikając na nią. Trzeba więc napisać odpowiedni skrypt, który ustawi focus na mapie od razu na starcie, by można było bez żadnych dodatkowych akcji przesuwać mapę strzałkami.

Nie istnieje żadna prosta funkcja, która automatycznie ustawiłaby focus. Aby to zrobić, należy posłużyć się małym obejściem, nakazując odpalenie zdarzenia click na mapie (jako elemencie dokumentu):

GEvent.trigger(document, "click", {srcElement: document.getElementById("mapka"), target: document.getElementById("mapka"), nodeType: 1});

Ten kod jest może się wydawać niezrozumiały, ale na szczęście pełni swoją rolę bardzo dobrze. Najprościej ujmując, metoda trigger() obiektu GEvent wywołuje kliknięcie ("click") na dokumencie (document), pozostałe parametry zawarte są w tablicy, w której kluczowe jest przypisanie obiektu mapy (document.getElementById("mapka")) do kluczów, definiujących co właściwie kliknęliśmy (srcElement i target).

Po zastosowaniu takiego zabiegu, będziemy w stanie przesuwać elegancko mapę za pomocą klawiatury: przykład 1pokaż kod przykładu

Obsługa innych klawiszy

Aby móc przechwycić zdarzenia wciśnięcia innych klawiszy niż strzałki, musimy napisać własną funkcję, i podpiąć ją do nasłuchu na wciśnięcie klawisza:

GEvent.addDomListener(document, "keypress", obslugaKlawisza);

Powyższy kod powoduje, że po wciśnięciu klawisza ("keypress") zostanie wywołana funkcja obslugaKlawisza() z jednym parametrem - kodem, określającym który klawisz został wciśnięty. Funkcja wygląda następująco:

function obslugaKlawisza(e)
{
	switch(e.keyCode)
	{
		case 13: stworzMarker(); return false; break;
		default: return true;
	}
}

Oczywiście, można zastosować kilka różnych przypadków za pomocą słów kluczowych case. Numerowi 13 przypisany jest klawisz ENTER. Zobacz, jak wygląda działanie tego kodu w przykładzie przykład 2pokaż kod przykładu

Kody klawiszów

Przykład 2 obługuje tylko klawisz ENTER, który ma kod 13. Tablica poniżej zawiera listę klawiszów i przypisanych im kodów: