Zdarzenia
W tej części kursu nauczysz się, jak sprawnie przechwytywać różne zdarzenia z mapy. Dzięki nim będziesz w stanie wykonać pewne akcje, gdy na przykład:
- zostanie wciśnię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 google.maps.event.
Funkcja 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
Ilość i rodzaj przekazywanych parametrów przez funkcję podpiętą do zdarzenia może być różny i zależy od konkretnego przypadku użycia.
Przykład 1 - zdarzenie click na mapie
Przykładowe dodanie obsługi zdarzenia kliknięcia na mapę
google.maps.event.addListener(mapa,'click',function(zdarzenie)
{
if(zdarzenie.latLng)
{
dymek.setContent('Współrzędne GPS klikniętego punktu:
'+zdarzenie.latLng);
dymek.setPosition(zdarzenie.latLng);
dymek.open(mapa);
}
});
W tym przykładzie tworzymy obsługę zdarzenia kliknięcia na mapę. Po wywołaniu funkcji z jednym, nazwanym argumentem zdarzenie sprawdzamy, czy przekazany obiekt posiada właściwość latLng (linia numer 3). Jeżeli tak jest, to możemy być pewni, że kliknięcie przechwycono prawidłowo, a we właściwości latLng znajdują się współrzędne geograficzne kliniętego punktu. Zastosowanie zdarzeń jest ograniczone wyobraźnią, w przykładzie powyżej wyświetlony jest dymek z wypisanymi współrzędnymi GPS. Sposób tworzenia dymków omówiono w poprzednim poradniku.
Przykład 2 - zdarzenie click na markerze
Nieco zmodyfikujemy poprzedni przykład, poprzez dodanie markerów i zdarzeń kliknięcia. Najlepiej wydzielić do tego zadania osobną funkcję w sposób następujący:
function dodajMarker(wspolrzedne)
{
var marker = new google.maps.Marker({
position: wspolrzedne,
map: mapa
});
google.maps.event.addListener(marker,'click',function(zdarzenie)
{
dymek.setContent('<strong>Kliknąłeś na marker!</strong><br />Współrzędne GPS markera:<br />'+marker.getPosition());
dymek.setPosition(marker.getPosition());
dymek.open(mapa);
});
}
dodajMarker(new google.maps.LatLng(53.4193540,14.5816040));
dodajMarker(new google.maps.LatLng(53.3174540,14.5926141));
W linii numer 7 zawarta jest definicja zdarzenia. Zauważ, że obiekt zdarzenie nie jest w ogóle wykorzystywany, ponieważ zdarzenie click na markerze nie przekazuje żadnych dodatkowych informacji. Wszelkie niezbędne parametry należy pobrać ręcznie, np. pozycję markera za pomocą metody getPosition().
Przykład 3 - zmiana zoomu
Jest to bardzo prosty przykład, którego działanie polega na wykryciu zmiany zoomu i wyświetleniu stosownego komunikatu. Pozornie nieprzydatny, okazuje się mieć duże znaczenie w praktyce - przykładowo, programista może wychwycić moment, w którym zmieniono zoom po to, by wyświetlić nowe markery, zmienić stan mapy, uaktualnić interfejs pozamapowy itp.
google.maps.event.addListener(mapa,'zoom_changed',function(zdarzenie)
{
alert('Zmieniono zoom mapy. Obecny poziom zbliżenia: '+mapa.getZoom());
});
Nienazwana funkcja jest wywoływana z pustym obiektem, bez żadnych właściwości. Po raz kolejny, wszelkie interesujące parametry powinny być wyzaczone ręcznie - w tym przypadku, znajdujemy zoom za pomocą metody getZoom() obiektu z mapą.
Zaawansowany przykład
Poniższy przykład działa następująco: po kliknięciu na mapę, wstawiany jest w to miejsce marker z losową literką. Po kliknięciu na marker, jest on usuwany. Naraz może na mapie współistnieć wiele markerów, o ich liczbie informuje specjalny pasek ze statusem. Przykład korzysta z omówionych wcześniej mechanizmów, tak więc warto go przeanalizować w ramach powtórki zdarzeń i generowania własnych ikon: