Omówienie elementów sterujących
Mapy wyświetlane za pomocą interfejsu Maps JavaScript API zawierają elementy interfejsu umożliwiające użytkownikowi interakcję z mapą. Elementy te są nazywane elementami sterującymi i możesz dodawać ich różne odmiany w aplikacji. Możesz też nie robić nic i pozwolić, by interfejs Maps JavaScript API obsługiwał wszystkie elementy sterujące.
Ta mapa przedstawia domyślny zestaw ustawień wyświetlany przez interfejs Maps JavaScript API:
Poniżej znajduje się lista pełnego zestawu elementów sterujących, których możesz używać na mapach:
- Sterowanie powiększeniem wyświetla przyciski „+” i „-” do zmiany poziomu powiększenia mapy. Ten element sterujący pojawia się domyślnie w prawym dolnym rogu mapy.
- Element sterujący typu mapy jest dostępny w formie menu lub poziomego paska przycisków i pozwala użytkownikowi wybrać typ mapy (
ROADMAP
,SATELLITE
,HYBRID
lubTERRAIN
). To ustawienie pojawia się domyślnie w lewym górnym rogu mapy. - Element sterujący Street View zawiera ikonę Pegmana, którą można przeciągnąć na mapę, aby włączyć Street View. To ustawienie wyświetla się domyślnie w prawym dolnym rogu mapy.
- Element sterujący obrotem udostępnia kombinację opcji przechylania i obracania w przypadku map zawierających zdjęcia skośne. Ten element sterujący pojawia się domyślnie w prawym dolnym rogu mapy. Więcej informacji znajdziesz w artykule na temat zdjęć 45°.
- Element sterujący skali wyświetla element skali mapy. Domyślnie to ustawienie jest wyłączone.
- Element sterujący na pełnym ekranie umożliwia otwarcie mapy w trybie pełnoekranowym. To ustawienie jest domyślnie włączone na komputerach i urządzeniach mobilnych. Uwaga: iOS nie obsługuje funkcji pełnego ekranu. Przycisk pełnego ekranu jest więc niewidoczny na urządzeniach z iOS.
- W obszarze Sterowanie skrótami klawiszowymi wyświetla się lista skrótów klawiszowych umożliwiających interakcję z mapą.
Nie masz dostępu do tych elementów mapy ani ich nie modyfikujesz. Zamiast tego modyfikuj pola MapOptions
mapy, co wpływa na widoczność i sposób prezentacji elementów sterujących. Możesz dostosować prezentację elementu sterującego podczas tworzenia instancji mapy (za pomocą odpowiedniego elementu MapOptions
) lub dynamicznie zmodyfikować mapę, wywołując metodę setOptions()
, aby zmienić opcje mapy.
Nie wszystkie z nich są domyślnie włączone. Informacje o domyślnym zachowaniu interfejsu użytkownika (i o tym, jak zmienić takie działanie) znajdziesz poniżej w sekcji Domyślny interfejs użytkownika.
Domyślny interfejs użytkownika
Domyślnie wszystkie elementy sterujące znikają, jeśli mapa jest zbyt mała (200 x 200 pikseli). Możesz zastąpić to działanie, ustawiając element sterujący jako widoczny. Zobacz Dodawanie elementów sterujących do mapy.
Sposób działania i wyglądu elementów sterujących jest taki sam na urządzeniach mobilnych i komputerach, z wyjątkiem trybu pełnoekranowego (zobacz listę elementów sterujących).
Oprócz tego obsługa klawiatury jest domyślnie włączona na wszystkich urządzeniach.
Wyłączanie domyślnego interfejsu użytkownika
Możesz całkowicie wyłączyć domyślne przyciski interfejsu API. Aby to zrobić, ustaw właściwość disableDefaultUI
mapy (w obiekcie MapOptions
) na true
. Ta właściwość wyłącza wszystkie przyciski sterujące interfejsu z interfejsu Maps JavaScript API. Nie ma jednak wpływu na gesty myszy ani skróty klawiszowe na mapie podstawowej, które są kontrolowane przez właściwości gestureHandling
i keyboardShortcuts
.
Ten kod wyłącza przyciski interfejsu użytkownika:
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: -33, lng: 151 }, disableDefaultUI: true, } ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -33, lng: 151 }, disableDefaultUI: true, }); } window.initMap = initMap;
Wypróbuj fragment
Dodawanie elementów sterujących do mapy
Możesz dostosować interfejs, usuwając, dodając lub modyfikując działanie i elementy interfejsu, aby zagwarantować, że przyszłe aktualizacje nie zmienią tego działania. Jeśli chcesz tylko dodać lub zmienić istniejące zachowanie, musisz upewnić się, że element sterujący jest bezpośrednio dodany do aplikacji.
Niektóre elementy sterujące są domyślnie wyświetlane na mapie, a inne nie będą wyświetlane, chyba że wyraźnie o nie poprosisz. Dodawanie elementów sterujących do mapy lub ich usuwanie jest określone w polach tych obiektów MapOptions
. Ustaw ich wartość true
, aby były widoczne, lub wartość false
, aby je ukryć:
{ zoomControl: boolean, mapTypeControl: boolean, scaleControl: boolean, streetViewControl: boolean, rotateControl: boolean, fullscreenControl: boolean }
Domyślnie wszystkie elementy sterujące znikają, jeśli mapa jest mniejsza niż 200 x 200 pikseli.
Możesz zastąpić to działanie, ustawiając element sterujący jako widoczny. Na przykład ta tabela pokazuje, czy element sterujący powiększeniem jest widoczny w zależności od rozmiaru mapy i ustawień pola zoomControl
:
Rozmiar mapy | zoomControl |
Widoczne? |
---|---|---|
Dowolny | false |
Nie |
Dowolny | true |
Tak |
>= 200 x 200 pikseli | undefined |
Tak |
< 200 x 200 piks. | undefined |
Nie |
Poniższy przykład ustawia na mapie ukrycie elementu sterującego Powiększenie i wyświetlenie elementu sterującego Skalowanie. Pamiętaj, że nie wyłączamy jawnie domyślnego interfejsu użytkownika, więc te zmiany sumują się do domyślnego działania interfejsu użytkownika.
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: -33, lng: 151 }, zoomControl: false, scaleControl: true, } ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -33, lng: 151 }, zoomControl: false, scaleControl: true, }); } window.initMap = initMap;
Wypróbuj fragment
Opcje sterowania
Istnieje możliwość skonfigurowania kilku elementów sterujących – możesz zmienić ich działanie lub wygląd. Na przykład element sterujący typu mapy może mieć postać poziomego paska lub menu.
Te elementy sterujące są modyfikowane przez zmianę odpowiednich pól opcji sterowania w obiekcie MapOptions
po utworzeniu mapy.
Na przykład opcje zmiany ustawienia typu mapy są wskazane w polu mapTypeControlOptions
. Element sterujący Typ mapy może pojawić się w jednej z następujących opcji style
:
google.maps.MapTypeControlStyle.HORIZONTAL_BAR
wyświetla tablicę elementów sterujących w postaci przycisków na poziomym pasku, tak jak w Mapach Google.google.maps.MapTypeControlStyle.DROPDOWN_MENU
wyświetla jeden przycisk sterowania, który umożliwia wybór typu mapy z menu.google.maps.MapTypeControlStyle.DEFAULT
wyświetla domyślne zachowanie, które zależy od rozmiaru ekranu i może się zmienić w kolejnych wersjach API.
Pamiętaj, że jeśli zmienisz opcje sterowania, musisz też bezpośrednio włączyć tę kontrolkę, ustawiając odpowiednią wartość MapOptions
na true
. Aby na przykład ustawić element sterujący typu mapy w taki sposób, aby wyświetlał styl DROPDOWN_MENU
, użyj tego kodu w obiekcie MapOptions
:
... mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } ...
Z przykładu poniżej dowiesz się, jak zmienić domyślne położenie i styl elementów sterujących.
TypeScript
// You can set control options to change the default position or style of many // of the map controls. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: -33, lng: 151 }, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: ["roadmap", "terrain"], }, } ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// You can set control options to change the default position or style of many // of the map controls. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -33, lng: 151 }, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: ["roadmap", "terrain"], }, }); } window.initMap = initMap;
Wypróbuj fragment
Elementy sterujące są zwykle konfigurowane podczas tworzenia mapy. Możesz jednak dynamicznie zmieniać sposób wyświetlania elementów sterujących, wywołując metodę setOptions()
obiektu Map
i przekazując jej nowe opcje sterowania.
Modyfikowanie elementów sterujących
Prezentację elementu sterującego określasz podczas tworzenia mapy za pomocą pól w jej obiekcie MapOptions
. Te pola są oznaczone poniżej:
zoomControl
włącza i wyłącza element sterujący Powiększenie. Domyślnie ten element sterujący jest widoczny w prawym dolnym rogu mapy. PolezoomControlOptions
dodatkowo określa elementZoomControlOptions
, którego należy użyć w przypadku tego elementu sterującego.mapTypeControl
włącza lub wyłącza element sterujący Typ mapy, który pozwala użytkownikowi przełączać się między typami map (np. Mapa i Satelita). Domyślnie ten element sterujący jest widoczny i wyświetla się w lewym górnym rogu mapy. PolemapTypeControlOptions
dodatkowo określa elementMapTypeControlOptions
, którego ma używać ta opcja.streetViewControl
włącza lub wyłącza element sterujący Pegmana, który umożliwia użytkownikom aktywowanie panoramy Street View. Domyślnie ten element sterujący jest widoczny w prawym dolnym rogu mapy. PolestreetViewControlOptions
dodatkowo określa elementStreetViewControlOptions
, którego ma używać ta opcja.rotateControl
włącza lub wyłącza wygląd elementu sterującego obracaniem obrazu pod kątem orientacji 45°. Domyślnie obecność elementu sterującego jest określana na podstawie obecności lub braku zdjęć pod kątem 45° dla danego typu mapy przy bieżącym powiększeniu i lokalizacji. Możesz zmienić działanie elementu sterującego, ustawiając właściwośćrotateControlOptions
mapy w taki sposób, aby określała wartośćRotateControlOptions
. Jeśli nie są obecnie dostępne żadne zdjęcia sferyczne, nie można wyświetlić elementu sterującego.scaleControl
włącza lub wyłącza element sterujący Skalowanie, który zapewnia prostą skalę mapy. Domyślnie ta opcja nie jest widoczna. Po włączeniu tej opcji będzie ona zawsze wyświetlana w prawym dolnym rogu mapy.scaleControlOptions
dodatkowo określa elementScaleControlOptions
, którego ma używać ta opcja.fullscreenControl
włącza lub wyłącza element sterujący, który otwiera mapę w trybie pełnoekranowym. Domyślnie to ustawienie jest włączone na komputerach i urządzeniach z Androidem. Po włączeniu tej opcji element sterujący pojawi się w prawym górnym rogu mapy.fullscreenControlOptions
dodatkowo określa elementFullscreenControlOptions
, którego ma używać ta opcja.
Pamiętaj, że możesz określić opcje ustawień, które zostały początkowo wyłączone.
Sterowanie pozycjonowaniem
Większość opcji sterujących zawiera właściwość position
(typu ControlPosition
), która wskazuje, gdzie na mapie należy umieścić element sterujący. Pozycjonowanie tych elementów sterujących nie jest bezwzględne. Zamiast tego interfejs API rozmieści elementy sterujące, kładąc je wokół istniejących elementów mapy lub innych ustawień w ramach określonych ograniczeń (takich jak rozmiar mapy).
Uwaga: nie można zagwarantować, że w skomplikowanych układach elementy sterujące nie będą się pokrywać, chociaż interfejs API będzie starał się je inteligentnie rozmieścić.
Obsługiwane są te pozycje sterujące:
TOP_CENTER
wskazuje, że element sterujący powinien znajdować się wzdłuż górnej krawędzi mapy.- Wartość
TOP_LEFT
wskazuje, że element sterujący powinien znajdować się wzdłuż lewego górnego rogu mapy, a wszystkie jego podrzędne elementy „ciągną się” w kierunku środkowego u góry. - Pole
TOP_RIGHT
wskazuje, że element sterujący powinien znajdować się wzdłuż prawego górnego rogu mapy, a wszystkie jego podrzędne elementy „ciągną się” w kierunku środkowego u góry. LEFT_TOP
wskazuje, że element sterujący powinien znajdować się wzdłuż lewego górnego rogu mapy, ale poniżej elementówTOP_LEFT
.RIGHT_TOP
wskazuje, że element sterujący powinien znajdować się wzdłuż prawego górnego rogu mapy, ale poniżej elementówTOP_RIGHT
.LEFT_CENTER
wskazuje, że element sterujący powinien znajdować się wzdłuż lewej strony mapy, w środku między pozycjamiTOP_LEFT
iBOTTOM_LEFT
.RIGHT_CENTER
wskazuje, że element sterujący powinien znajdować się po prawej stronie mapy, w środku między pozycjamiTOP_RIGHT
iBOTTOM_RIGHT
.LEFT_BOTTOM
wskazuje, że element sterujący powinien znajdować się w lewym dolnym rogu mapy, ale nad elementamiBOTTOM_LEFT
.RIGHT_BOTTOM
wskazuje, że element sterujący powinien znajdować się w prawym dolnym rogu mapy, ale nad elementamiBOTTOM_RIGHT
.BOTTOM_CENTER
wskazuje, że element sterujący powinien znajdować się na środku u dołu mapy.- Wartość
BOTTOM_LEFT
wskazuje, że element sterujący powinien znajdować się w lewym dolnym rogu mapy, a wszystkie jego podrzędne elementy „ciągną się” w kierunku środkowego u dołu mapy. - Pole
BOTTOM_RIGHT
wskazuje, że element sterujący powinien znajdować się w prawym dolnym rogu mapy, a wszystkie jego podrzędne elementy „ciągną się” w kierunku środkowego u dołu mapy.
Pamiętaj, że te pozycje mogą zbiegać się z położeniem elementów interfejsu, których miejsc docelowych nie możesz modyfikować (np. praw autorskich lub logo Google). W takich przypadkach elementy sterujące będą przepływać zgodnie z logiką określoną dla każdej pozycji i wyświetlają się jak najbliżej wskazanej pozycji.
Poniższy przykład to prosta mapa z włączonymi wszystkimi elementami sterującymi w różnych pozycjach.
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 12, center: { lat: -28.643387, lng: 153.612224 }, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_CENTER, }, zoomControl: true, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_CENTER, }, scaleControl: true, streetViewControl: true, streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_TOP, }, fullscreenControl: true, } ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: -28.643387, lng: 153.612224 }, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_CENTER, }, zoomControl: true, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_CENTER, }, scaleControl: true, streetViewControl: true, streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_TOP, }, fullscreenControl: true, }); } window.initMap = initMap;
Wypróbuj fragment
Ustawienia niestandardowe
Oprócz modyfikowania stylu i pozycji istniejących opcji interfejsu API możesz też utworzyć własne elementy sterujące do obsługi interakcji z użytkownikiem. Elementy sterujące to nieruchome widżety pływające po mapie w pozycji bezwzględnej, w przeciwieństwie do nakładek, które przesuwają się razem z mapą bazową. Zasadniczo element sterujący to element <div>
, który ma bezwzględne położenie na mapie, wyświetla interfejs użytkownika i obsługuje interakcję z użytkownikiem lub mapą, zwykle za pomocą modułu obsługi zdarzeń.
Do utworzenia własnego niestandardowego elementu sterującego wystarczy tylko kilka reguł. Możesz jednak zastosować się do tych wytycznych:
- Określ odpowiedni kod CSS dla wyświetlanych elementów sterujących.
- Obsługa interakcji z użytkownikiem lub mapą za pomocą modułów obsługi zdarzeń w przypadku zmian właściwości map lub zdarzeń użytkownika (np. zdarzeń
'click'
). - Utwórz element
<div>
, który będzie przechowywać element sterujący, i dodaj ten element do właściwościcontrols
obiektuMap
.
Każda z nich została omówiona poniżej.
Niestandardowe elementy sterujące rysunkami
Sposób, w jaki włączysz tę funkcję, zależy od Ciebie. Ogólnie zalecamy umieszczenie całej prezentacji kontrolnej w jednym elemencie <div>
, dzięki czemu elementy sterujące będą dostępne w jednej jednostce. Wykorzystamy go w przykładach poniżej.
Projektowanie atrakcyjnych elementów sterujących wymaga pewnej wiedzy z zakresu CSS i struktur DOM. Poniższy kod przedstawia funkcję tworzącą element przycisku, który przesuwa mapę tak, aby wyśrodkować się na Chicago.
function createCenterControl(map) { const controlButton = document.createElement("button"); // Set CSS for the control. controlButton.style.backgroundColor = "#fff"; controlButton.style.border = "2px solid #fff"; controlButton.style.borderRadius = "3px"; controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)"; controlButton.style.color = "rgb(25,25,25)"; controlButton.style.cursor = "pointer"; controlButton.style.fontFamily = "Roboto,Arial,sans-serif"; controlButton.style.fontSize = "16px"; controlButton.style.lineHeight = "38px"; controlButton.style.margin = "8px 0 22px"; controlButton.style.padding = "0 5px"; controlButton.style.textAlign = "center"; controlButton.textContent = "Center Map"; controlButton.title = "Click to recenter the map"; controlButton.type = "button"; // Setup the click event listeners: simply set the map to Chicago. controlButton.addEventListener("click", () => { map.setCenter(chicago); }); return controlButton; }
Obsługa zdarzeń z elementów sterujących niestandardowych
Aby element sterujący był przydatny, musi faktycznie coś zrobić. Działanie tej funkcji należy do Ciebie. Element sterujący może reagować na dane wejściowe użytkownika lub na zmiany stanu Map
.
Do odpowiadania na dane wejściowe użytkownika używaj polecenia addEventListener()
, które obsługuje obsługiwane zdarzenia DOM. Ten fragment kodu dodaje odbiornik zdarzenia 'click'
przeglądarki. Pamiętaj, że to zdarzenie jest odbierane z interfejsu DOM, a nie z mapy.
// Setup the click event listener: set the map to center on Chicago var chicago = {lat: 41.850, lng: -87.650}; controlButton.addEventListener('click', () => { map.setCenter(chicago); });
Dostępność niestandardowych elementów sterujących
Aby elementy sterujące odbierały zdarzenia klawiatury i wyświetlały się poprawnie czytnikom ekranu:
- Zawsze używaj natywnych elementów HTML na potrzeby przycisków, elementów formularzy i etykiet. Elementu DIV używaj tylko jako kontenera do przechowywania natywnych elementów sterujących. Nie używaj ponownie elementu DIV jako interaktywnego elementu interfejsu.
- W razie potrzeby użyj elementu
label
, atrybututitle
lub atrybutuaria-label
, aby podać informacje o elemencie interfejsu.
Pozycjonowanie elementów sterujących
Niestandardowe elementy sterujące są umieszczane na mapie w odpowiednich miejscach we właściwości controls
obiektu Map
. Ta właściwość zawiera tablicę elementów google.maps.ControlPosition
. Aby dodać do mapy niestandardową kontrolkę, dodaj element Node
(zwykle <div>
) do odpowiedniego elementu ControlPosition
. Informacje na temat tych pozycji znajdziesz w sekcji Kontrola pozycjonowania powyżej.
Każdy element ControlPosition
przechowuje MVCArray
elementów sterujących wyświetlanych w tej pozycji. W związku z tym, gdy elementy sterujące zostaną dodane lub usunięte, interfejs API odpowiednio zaktualizuje ustawienia.
Interfejs API umieszcza ustawienia na każdej pozycji według kolejności właściwości index
. Elementy o niższym indeksie znajdują się na początku.
Na przykład 2 niestandardowe elementy sterujące w pozycji BOTTOM_RIGHT
zostaną rozmieszczone zgodnie z tą kolejnością indeksów. Pierwszeństwo będą miały niższe wartości indeksu. Domyślnie wszystkie niestandardowe elementy sterujące są umieszczane po wprowadzeniu domyślnych ustawień interfejsu API. Możesz zastąpić to działanie, ustawiając wartość ujemną we właściwości index
elementu sterującego. Niestandardowe elementy sterujące nie mogą znajdować się po lewej stronie logo ani po prawej stronie praw autorskich.
Poniższy kod tworzy nowy element sterujący (jego konstruktor nie jest widoczny) i dodaje go do mapy w pozycji TOP_RIGHT
.
var map = new google.maps.Map(document.getElementById('map'), mapOptions); // Create a DIV to attach the control UI to the Map. const centerControlDiv = document.createElement("div"); // Create the control. This code calls a function that // creates a new instance of a button control. const centerControl = createCenterControl(map); // Append the control to the DIV. centerControlDiv.appendChild(centerControl); // Add the control to the map at a designated control position // by pushing it on the position's array. This code will // implicitly add the control to the DOM, through the Map // object. You should not attach the control manually. map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
Przykład niestandardowych elementów sterujących
Poniższe ustawienie jest proste (choć nie jest szczególnie przydatne) i łączy wzorce pokazane powyżej. Ten element sterujący reaguje na zdarzenia DOM 'click'
, wyśrodkowując mapę na określonej domyślnej lokalizacji:
TypeScript
let map: google.maps.Map; const chicago = { lat: 41.85, lng: -87.65 }; /** * Creates a control that recenters the map on Chicago. */ function createCenterControl(map) { const controlButton = document.createElement('button'); // Set CSS for the control. controlButton.style.backgroundColor = '#fff'; controlButton.style.border = '2px solid #fff'; controlButton.style.borderRadius = '3px'; controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'; controlButton.style.color = 'rgb(25,25,25)'; controlButton.style.cursor = 'pointer'; controlButton.style.fontFamily = 'Roboto,Arial,sans-serif'; controlButton.style.fontSize = '16px'; controlButton.style.lineHeight = '38px'; controlButton.style.margin = '8px 0 22px'; controlButton.style.padding = '0 5px'; controlButton.style.textAlign = 'center'; controlButton.textContent = 'Center Map'; controlButton.title = 'Click to recenter the map'; controlButton.type = 'button'; // Setup the click event listeners: simply set the map to Chicago. controlButton.addEventListener('click', () => { map.setCenter(chicago); }); return controlButton; } function initMap() { map = new google.maps.Map(document.getElementById('map') as HTMLElement, { zoom: 12, center: chicago, }); // Create the DIV to hold the control. const centerControlDiv = document.createElement('div'); // Create the control. const centerControl = createCenterControl(map); // Append the control to the DIV. centerControlDiv.appendChild(centerControl); map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; const chicago = { lat: 41.85, lng: -87.65 }; /** * Creates a control that recenters the map on Chicago. */ function createCenterControl(map) { const controlButton = document.createElement("button"); // Set CSS for the control. controlButton.style.backgroundColor = "#fff"; controlButton.style.border = "2px solid #fff"; controlButton.style.borderRadius = "3px"; controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)"; controlButton.style.color = "rgb(25,25,25)"; controlButton.style.cursor = "pointer"; controlButton.style.fontFamily = "Roboto,Arial,sans-serif"; controlButton.style.fontSize = "16px"; controlButton.style.lineHeight = "38px"; controlButton.style.margin = "8px 0 22px"; controlButton.style.padding = "0 5px"; controlButton.style.textAlign = "center"; controlButton.textContent = "Center Map"; controlButton.title = "Click to recenter the map"; controlButton.type = "button"; // Setup the click event listeners: simply set the map to Chicago. controlButton.addEventListener("click", () => { map.setCenter(chicago); }); return controlButton; } function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: chicago, }); // Create the DIV to hold the control. const centerControlDiv = document.createElement("div"); // Create the control. const centerControl = createCenterControl(map); // Append the control to the DIV. centerControlDiv.appendChild(centerControl); map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); } window.initMap = initMap;
Wypróbuj fragment
Dodawanie stanu do ustawień
Elementy sterujące mogą też przechowywać stan. Poniższy przykład jest podobny do poprzedniego, ale element sterujący zawiera dodatkowy przycisk „Ustaw stronę główną”, który ustawia nowy adres domowy. Aby to zrobić, tworzymy w obrębie kontroli właściwość home_
do przechowywania tego stanu i udostępniania dla niego metod pobierających i ustawionych.
TypeScript
let map: google.maps.Map; const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 }; /** * The CenterControl adds a control to the map that recenters the map on * Chicago. */ class CenterControl { private map_: google.maps.Map; private center_: google.maps.LatLng; constructor( controlDiv: HTMLElement, map: google.maps.Map, center: google.maps.LatLngLiteral ) { this.map_ = map; // Set the center property upon construction this.center_ = new google.maps.LatLng(center); controlDiv.style.clear = "both"; // Set CSS for the control border const goCenterUI = document.createElement("button"); goCenterUI.id = "goCenterUI"; goCenterUI.title = "Click to recenter the map"; controlDiv.appendChild(goCenterUI); // Set CSS for the control interior const goCenterText = document.createElement("div"); goCenterText.id = "goCenterText"; goCenterText.innerHTML = "Center Map"; goCenterUI.appendChild(goCenterText); // Set CSS for the setCenter control border const setCenterUI = document.createElement("button"); setCenterUI.id = "setCenterUI"; setCenterUI.title = "Click to change the center of the map"; controlDiv.appendChild(setCenterUI); // Set CSS for the control interior const setCenterText = document.createElement("div"); setCenterText.id = "setCenterText"; setCenterText.innerHTML = "Set Center"; setCenterUI.appendChild(setCenterText); // Set up the click event listener for 'Center Map': Set the center of // the map // to the current center of the control. goCenterUI.addEventListener("click", () => { const currentCenter = this.center_; this.map_.setCenter(currentCenter); }); // Set up the click event listener for 'Set Center': Set the center of // the control to the current center of the map. setCenterUI.addEventListener("click", () => { const newCenter = this.map_.getCenter()!; if (newCenter) { this.center_ = newCenter; } }); } } function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 12, center: chicago, }); // Create the DIV to hold the control and call the CenterControl() // constructor passing in this DIV. const centerControlDiv = document.createElement("div"); const control = new CenterControl(centerControlDiv, map, chicago); // @ts-ignore centerControlDiv.index = 1; centerControlDiv.style.paddingTop = "10px"; map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; const chicago = { lat: 41.85, lng: -87.65 }; /** * The CenterControl adds a control to the map that recenters the map on * Chicago. */ class CenterControl { map_; center_; constructor(controlDiv, map, center) { this.map_ = map; // Set the center property upon construction this.center_ = new google.maps.LatLng(center); controlDiv.style.clear = "both"; // Set CSS for the control border const goCenterUI = document.createElement("button"); goCenterUI.id = "goCenterUI"; goCenterUI.title = "Click to recenter the map"; controlDiv.appendChild(goCenterUI); // Set CSS for the control interior const goCenterText = document.createElement("div"); goCenterText.id = "goCenterText"; goCenterText.innerHTML = "Center Map"; goCenterUI.appendChild(goCenterText); // Set CSS for the setCenter control border const setCenterUI = document.createElement("button"); setCenterUI.id = "setCenterUI"; setCenterUI.title = "Click to change the center of the map"; controlDiv.appendChild(setCenterUI); // Set CSS for the control interior const setCenterText = document.createElement("div"); setCenterText.id = "setCenterText"; setCenterText.innerHTML = "Set Center"; setCenterUI.appendChild(setCenterText); // Set up the click event listener for 'Center Map': Set the center of // the map // to the current center of the control. goCenterUI.addEventListener("click", () => { const currentCenter = this.center_; this.map_.setCenter(currentCenter); }); // Set up the click event listener for 'Set Center': Set the center of // the control to the current center of the map. setCenterUI.addEventListener("click", () => { const newCenter = this.map_.getCenter(); if (newCenter) { this.center_ = newCenter; } }); } } function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: chicago, }); // Create the DIV to hold the control and call the CenterControl() // constructor passing in this DIV. const centerControlDiv = document.createElement("div"); const control = new CenterControl(centerControlDiv, map, chicago); // @ts-ignore centerControlDiv.index = 1; centerControlDiv.style.paddingTop = "10px"; map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); } window.initMap = initMap;