Map Google - z domyślnego zestawu kontrolnego:
Mapy Google - kontrole domyślne
Wykazując standardową mapę Google, pochodzi z domyślnego zestawu kontrolnego:
- Powiększenie - wyświetla suwak lub "+/-" przycisków, aby kontrolować poziom zoomu na mapie
- Pan - wyświetla pan kontrolę dla panoramowanie mapę
- MapType - umożliwia przełącznik użytkownika pomiędzy typami map (roadmap and satellite)
- Street View - wyświetla ikonę Pegman który może być przeciągnięty na mapie, aby umożliwić Street View
Mapy Google - więcej kontroli
Oprócz kontroli Domyślnie Google Maps oferuje również:
- Skala - wyświetla element skalę mapy
- Obrót - wyświetla małą ikonę kolisty, który pozwala na obracanie mapy
- Mapa ogólna - wyświetla mapę podglądu miniatur odzwierciedlające aktualną mapę rzutnię ramach szerszego obszaru
Można określić, które kontroluje, aby pokazać podczas tworzenia mapy (inside MapOptions) lub dzwoniąc setOptions() , aby zmienić opcje mapy.
Mapy Google - wyłączenie domyślnych formantów
Można zamiast tego chcesz wyłączyć kontrole domyślne.
Aby to zrobić, należy ustawić właściwość disableDefaultUI mapie jest (w ramach opcji Mapa Object) true:
Mapy Google - Włącz wszystkie formanty
Niektóre elementy sterujące znajdują się na mapie domyślnie; podczas gdy inni nie będą wyświetlane, chyba że je ustawić.
Dodawanie lub usuwanie kontrole z mapy jest określona w Opcjach mapy obiektu.
Ustaw regulator true aby był on widoczny - Ustaw regulator na false, aby ją ukryć.
Poniższy przykład zamienia "on" wszystkie przyciski:
Przykład
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true Spróbuj sam " Mapy Google - Modyfikowanie Kontrole
Kilka kontroli map są konfigurowalne.
Kontrole mogą być modyfikowane poprzez określenie opcji sterowania pola.
Na przykład, opcje modyfikacji sterowania zoomem są określone w dziedzinie zoomControlOptions. Pole zoomControlOptions może zawierać:
- google.maps.ZoomControlStyle.SMALL - wyświetla sterowanie mini-zoom (tylko przyciski + i -)
- google.maps.ZoomControlStyle.LARGE - wyświetla standardowy suwak zoom
- google.maps.ZoomControlStyle.DEFAULT - wybiera najlepszą kontrolę zoomu w oparciu o urządzenia i wielkości mapy
Przykład
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}
Spróbuj sam " Note: Jeśli modyfikować kontroli, zawsze najpierw włączyć kontrolę (set it to true) .
Innym konfigurowalny kontroli jest kontrola MapType.
Opcje modyfikacji kontroli są określone w dziedzinie mapTypeControlOptions. Pole mapTypeControlOptions może zawierać ::
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - wyświetlacz jeden przycisk dla każdego typu mapy
- google.maps.MapTypeControlStyle.DROPDOWN_MENU - wybierz typ map za pomocą menu rozwijanego
- google.maps.MapTypeControlStyle.DEFAULT - wyświetla "default" zachowanie (depends on screen size)
Przykład
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
} Spróbuj sam " Można również umieścić kontrolkę, z właściwością ControlPosition:
Przykład
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
} Spróbuj sam " Mapy Google - Custom Controls
Tworzenie niestandardowych formantów, które zawsze zabierze Cię z powrotem do Londynu, po kliknięciu (if the map is dragged) :
Przykład
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText); Spróbuj sam "