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.

Obsługa klawiatury

Ten artykuł dotyczy API w wersji 2

« 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:

kodklawiszkodklawiszkodklawisz
8Backspace 13Enter 33!
34" 35# 36$
37% 38& 39'
40( 41) 42*
43+ 44, 45-
46. 47/ 480
491 502 513
524 535 546
557 568 579
58: 59; 60<
61= 62> 63?
64@ 65A 66B
67C 68D 69E
70F 71G 72H
73I 74J 75K
76L 77M 78N
79O 80P 81Q
82R 83S 84T
85U 86V 87W
88X 89Y 90Z
91[ 92\ 93]
94^ 95_ 96`
97a 98b 99c
100d 101e 102f
103g 104h 105i
106j 107k 108l
109m 110n 111o
112p 113q 114r
115s 116t 117u
118v 119w 120x
121y 122z 123{
124| 125} 126~

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