Wbudowane kontrolki i sterowanie
Tworzone dotąd mapy nie umożliwiały zbyt dużej interakcji - można je było co najwyżej przesuwać. W tej części kursu dowiesz się, jak udostępnić oglądającemu możliwość wpływania na tryb wyświetlania mapy.
Kontrolka nawigacji podstawowej
Kontrolka ta pozwala na zmianę poziomu przybliżenia myszą za pomocą ekranowego suwaka, a także przesuwanie mapy w cztery strony świata za pomocą odpowiednich przycisków. Aby dodać kontrolkę do mapy, należy ustawić opcjonalny parametr navigationControl w opcjach mapy na wartość true, na przykład:
var wspolrzedne = new google.maps.LatLng(53.41935400090768,14.58160400390625);
var opcjeMapy = {
zoom: 10,
center: wspolrzedne,
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true,
navigationControl: true,
};
mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);
W linii 6 ustawiono własność disableDefaultUI na false. Dzięki temu, API na starcie nie wyświetli automatycznie żadnej kontrolki - to twórca aplikacji będzie decydował, którą kontrolkę dodać do mapy.
Działanie powyższego kodu możesz sprawdzić w przykładzie 1: przykład 1pokaż kod przykładu
Kontrolka zmiany trybu mapy
API Google Maps udostępnia cztery podstawowe tryby wyświetlania:
- tryb normalny (ROADMAP)
- tryb satelitarny - zdjęcia satelitarne (SATELLITE)
- tryb hybrydowy - zdjęcia satelitarne z nakładką z nazwami ulic (HYBRID)
- tryb terenowy (TERRAIN)
Wyboru pomiędzy nimi można dokonać myszką, za pomocą kontrolki MapTypeControl:
Udostępnienie kontrolki sprowadza się do dodania jednej linijki (linia numer 8: mapTypeControl: true):
var opcjeMapy = {
zoom: 10,
center: wspolrzedne,
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true,
mapTypeControl: true
};
Przykład:
przykład 2pokaż kod przykładu
Jeżeli nie chcesz pokazywać wszystkich czterech trybów mapy, można łatwo poinstruować API, które z nich mają znaleźć się w kontrolce wyboru:
MapTypeId.ROADMAP |
MapTypeId.SATELLITE |
MapTypeId.HYBRID |
MapTypeId.TERRAIN |
W tym celu należy ustawić opcje kontrolki mapy, które zmienia się tak:
var opcjeMapy = {
zoom: 10,
center: wspolrzedne,
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions:
{
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.TERRAIN
]
}
};
mapTypeIds to tablica, w której każdy element jest stałą, odpowiadającą żądanej mapie. Uruchomienie kodu z powyższego listingu wyświetli jedynie trzy tryby mapy: mapę drogową, mapę satelitarną i mapę terenową. Kolejność ich wyświetlania będzie zgodna z kolejnością, z jaką zostały zapisane w tablicy.
Przykład:przykład 3pokaż kod przykładu
Kontrolka podziałki skali
Do mapy możesz również dodać podziałkę skali. Aby to zrobić, należy ustawić na true opcję scaleControl:
var opcjeMapy = {
zoom: 10,
center: wspolrzedne,
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true,
scaleControl: true,
};
Przykład działania: przykład 4pokaż kod przykładu
Wszystko razem
Nic nie stoi na przeszkodzie, aby dodać do mapy kilka kontrolek. Przykład 5 pokazuje efekt takiego działania:
var wspolrzedne = new google.maps.LatLng(53.41935400090768,14.58160400390625);
var opcjeMapy = {
zoom: 10,
center: wspolrzedne,
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true,
mapTypeControl: true, // kontrolka trybu mapy
scaleControl: true, // kontrolka skali
navigationControl: true // kontrolka nawigacji
};
mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);
Cały przykład: przykład 5pokaż kod przykładu
Style kontrolki nawigacji
Trzecia wersja API pozwala na rysowanie kontrolek o różnych wyglądach, w zależności od urządzenia, na którym mapa jest wyświetlana:
 Standardowa ZOOM_PAN |
 Uproszczona SMALL |
 Android ANDROID |
Każdy obrazek podpisano nazwą stałej, zawierającą definicję kontrolki. Stałe znajdują się w przestrzeni google.maps.NavigationControlStyle, co oznacza, że używa się je w postaci np. google.maps.NavigationControlStyle.ANDROID. Czwartą stałą jest DEFAULT, dzięki której tryb mapy zostanie automatycznie dobrany w zależości od urządzenia, na którym mapę wyświetlono (na przykład na mobilnych urządzeniach będzie to kontrolka ANDROID, na dużych mapach na komputerach ZOOM_PAN, podczas gdy na małych mapach SMALL.
Styl wyświetlania kontrolki ustawia się poprzez własność navigationControlStyle w sposób następujący:
var opcjeMapy = {
zoom: 10,
center: wspolrzedne,
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true,
navigationControl: true, // kontrolka nawigacji
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.ANDROID // w stylu ANDROID
}
};
Przykład 6 zawiera kontrolkę nawigacji w stylu ANDROID: przykład 6pokaż kod przykładu
Style kontrolki trybu mapy
Dostępne są dwa style wyświetlania trybów mapy:
 Rozwijana DROPDOWN_MENU |
 Pozioma HORIZONTAL_BAR |
Znajdują się w przestrzeni google.maps.MapTypeControlStyle. Trzecią opcją jest tryb DEFAULT, który dobiera rodzaj kontrolki w zależności od dostępnej szerokości mapy. Styl zmienia się następująco:
var opcjeMapy = {
zoom: 10,
center: wspolrzedne,
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true,
mapTypeControl: true, // kontrolka trybu mapy
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU // w stylu rozwijanego menu
}
};
Przykład menu rozwijanego: przykład 7pokaż kod przykładu
Pozycjonowanie kontrolek
Domyślnie, kontrolki umieszczane są w miejscu, które zostało określone z góry przez API. Możliwa jest zmiana tego zachowania. Jest dziewięć możliwości zaczepienia kontrolki
Wszystkie wymienione wyżej stałe znajdują się w przestrzeni google.maps.ControlPosition. Oto przykład, w którym dodano wszystkie kontrolki w niestandardowych pozycjach:
var opcjeMapy = {
zoom: 10,
center: wspolrzedne,
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true,
mapTypeControl: true, // kontrolka trybu mapy
scaleControl: true, // kontrolka skali
navigationControl: true, // kontrolka nawigacji
navigationControlOptions:
{
position: google.maps.ControlPosition.TOP_RIGHT // kontrolka nawigacji w prawym, górnym rogu
},
mapTypeControlOptions:
{
position: google.maps.ControlPosition.TOP // kontrolka trybu mapy na górze
},
scaleControlOptions:
{
position: google.maps.ControlPosition.TOP_LEFT // kontrolka skali w lewym górnym rogu
}
};
Oto wynik działania: przykład 8pokaż kod przykładu
Przejdź do kolejnej części kursu
Kolejna część kursu jest w trakcie opracowania. Zapraszamy wkrótce!
Tytuł następnej części kursu to Zdarzenia