Sterowanie Mapami Google
Mapy Google — domyślne sterowanie
Wyświetlając standardową mapę Google, jest ona dostarczana z domyślnym zestawem kontrolnym:
- Zoom - wyświetla suwak lub przyciski „+/-” do sterowania poziomem powiększenia mapy
- Pan - wyświetla kontrolkę panoramowania do przesuwania mapy
- MapType - pozwala użytkownikowi przełączać się między typami map (mapa drogowa i satelita)
- Street View — wyświetla ikonę Pegmana, którą można przeciągnąć na mapę, aby włączyć Street View
Mapy Google — więcej kontroli
Oprócz domyślnych elementów sterujących Mapy Google mają również:
- Skala — wyświetla element skali mapy
- Obróć - wyświetla małą okrągłą ikonę, która umożliwia obracanie map
- Mapa przeglądowa — wyświetla miniaturową mapę przeglądową odzwierciedlającą bieżący widok mapy na większym obszarze
Możesz określić, które kontrolki mają być pokazywane podczas tworzenia mapy (wewnątrz MapOptions) lub przez wywołanie setOptions(), aby zmienić opcje mapy.
Mapy Google — wyłączanie domyślnych elementów sterujących
Zamiast tego możesz chcieć wyłączyć domyślne kontrolki.
Aby to zrobić, ustaw właściwość disableDefaultUI mapy (w obiekcie opcji mapy) na true:
Przykład
var mapOptions {disableDefaultUI: true}
Mapy Google — włącz wszystkie elementy sterujące
Niektóre elementy sterujące są domyślnie wyświetlane na mapie; podczas gdy inne nie pojawią się, chyba że je ustawisz.
Dodawanie lub usuwanie kontrolek z mapy jest określone w obiekcie Opcje mapy.
Ustaw kontrolkę na true, aby była widoczna — ustaw kontrolkę na false, aby ją ukryć.
Poniższy przykład włącza wszystkie kontrolki:
Przykład
var mapOptions {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}
Mapy Google — Modyfikowanie elementów sterujących
Kilka kontrolek mapy można konfigurować.
Kontrolki można modyfikować, określając pola opcji kontrolek.
Na przykład opcje modyfikowania kontrolki Zoom są określone w polu zoomControlOptions. Pole zoomControlOptions może zawierać:
- google.maps.ZoomControlStyle.SMALL - wyświetla kontrolkę mini-zoom (tylko przyciski + i -)
- google.maps.ZoomControlStyle.LARGE - wyświetla standardowy suwak powiększenia
- google.maps.ZoomControlStyle.DEFAULT — wybiera najlepszą kontrolę powiększenia na podstawie urządzenia i rozmiaru mapy
Przykład
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
Uwaga: Jeśli modyfikujesz kontrolkę, zawsze najpierw włączaj kontrolkę (ustaw ją na true).
Inną konfigurowalną kontrolką jest kontrolka MapType.
Opcje modyfikowania kontrolki są określone w polu mapTypeControlOptions. Pole mapTypeControlOptions może zawierać:
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - wyświetlaj jeden przycisk dla każdego typu mapy
- google.maps.MapTypeControlStyle.DROPDOWN_MENU — wybierz typ mapy z menu rozwijanego
- google.maps.MapTypeControlStyle.DEFAULT — wyświetla zachowanie „domyślne” (w zależności od rozmiaru ekranu)
Przykład
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
Możesz również umieścić kontrolkę za pomocą właściwości ControlPosition:
Przykład
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_CENTER
}