Omówienie elementów sterujących
Mapy wyświetlane za pomocą interfejsu Maps JavaScript API zawierają interfejs użytkownika które umożliwiają użytkownikowi interakcję z mapą. Elementy te są nazywane ustawienia. Możesz uwzględnić ich różne odmiany w aplikacji. Możesz też nic nie robić i pozwolić, Maps JavaScript API obsługuje wszystkie elementy sterujące.
Poniższa mapa przedstawia domyślny zestaw elementów sterujących wyświetlany Maps JavaScript API:
Poniżej znajduje się lista wszystkich opcji, których możesz używać w swoich mapach:
- Element sterujący powiększenia wyświetla znak „+” i „-” Przyciski do zmiany poziomu powiększenia mapy. Ta opcja pojawia się domyślnie w w prawym dolnym rogu mapy.
- Sterowanie aparatem obejmuje oba powiększenie i przesuwania. Jest on domyślnie wyświetlany zamiast elementu sterującego powiększeniem podczas korzystania wersji beta.
- Ustawienie typu mapy jest dostępne w menu.
lub poziomy paska z przyciskami, co pozwala użytkownikowi wybrać typ mapy
(
ROADMAP
,SATELLITE
,HYBRID
lubTERRAIN
). Ten element sterujący pojawia się domyślnie w lewym górnym rogu w rogu mapy. - Element sterujący Street View zawiera ikonę Pegmana który można przeciągnąć na mapę, aby włączyć widok Street View. Ten element sterujący jest domyślnie wyświetlana w prawym dolnym rogu mapy.
- Element sterujący obrotem zapewnia połączenie tych funkcji: opcji przechylania i obracania w przypadku map zawierających zdjęcia ukośne. Ten element sterujący jest domyślnie widoczny w prawym dolnym rogu mapy. Zobacz 12° zdjęcia.
- Element sterujący skali wyświetla element skali mapy. To ustawienie jest domyślnie wyłączone.
- Sterowanie pełnoekranowym umożliwia otwieranie mapę w trybie pełnoekranowym. Ta opcja jest domyślnie włączona na komputerach i urządzeniach mobilnych. Uwaga: iOS nie obsługuje funkcji pełnego ekranu. Sterowanie trybem pełnoekranowym jest więc niewidoczne na urządzeniach z iOS.
- Sterowanie za pomocą skrótów klawiszowych powoduje wyświetlenie listy skrótów klawiszowych do interakcji z mapą.
Nie masz bezpośredniego dostępu do tych elementów mapy ani nie możesz ich modyfikować. Zamiast tego:
zmień pola MapOptions
mapy, które wpływają na widoczność
i sposobu prezentowania elementów sterujących. Możesz dostosować prezentację kontrolną na
Utworzenie instancji mapy (z użyciem odpowiednich MapOptions
) lub zmodyfikowanie
dynamicznie, wywołując funkcję setOptions()
, aby zmienić
.
Nie wszystkie z tych ustawień są domyślnie włączone. Aby dowiedzieć się więcej o domyślnym interfejsie użytkownika działania użytkowników (oraz sposobów ich zmodyfikowania), można znaleźć w sekcji Domyślny interfejs poniżej.
Domyślny interfejs
Domyślnie wszystkie elementy sterujące znikają, jeśli mapa jest zbyt mała (200 x 200 pikseli). Możesz zastąpić to zachowanie, ustawiając wartość elementu sterującego jako widoczne. Patrz sekcja Dodawanie elementów sterujących do Mapa.
Działanie i wygląd elementów sterujących są takie same na urządzeniach mobilnych komputerach, z wyjątkiem elementu sterującego pełnym ekranem (zobacz opisane na liście dostępnych elementów sterujących).
Dodatkowo domyślnie obsługa klawiatury jest włączona na wszystkich urządzeniach.
Wyłącz domyślny interfejs
Możesz chcieć całkowicie wyłączyć domyślne przyciski interfejsu API. Aby to zrobić:
ustaw właściwość disableDefaultUI
mapy (w sekcji
MapOptions
) do true
. Ta usługa
wyłącza wszystkie przyciski sterujące UI z interfejsu Maps JavaScript API. it
nie ma jednak wpływu na gesty myszy ani skróty klawiszowe
które są kontrolowane przez gestureHandling
oraz
keyboardShortcuts
.
Ten kod wyłącza przyciski interfejsu:
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;
Zobacz próbkę
Dodaj elementy sterujące do mapy
Możesz dostosować swój interfejs, usuwając, dodając lub modyfikując interfejs działania i opcje kontroli oraz upewnij się, że przyszłe aktualizacje tego nie zmienią zachowanie użytkownika. Jeśli chcesz tylko dodać lub zmienić dotychczasowy sposób działania, musisz upewnij się, że element sterujący jest wyraźnie dodany do aplikacji.
Niektóre elementy sterujące domyślnie pojawiają się na mapie, a inne nie
chyba że wyraźnie o to poprosisz. dodawania i usuwania opcji w sekcji
mapa jest określona w następującym obiekcie MapOptions
ustawione na true
, by były widoczne lub ustawione jako
false
, aby je ukryć:
{ zoomControl: boolean, cameraControl: 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 zachowanie, ustawiając wartość elementu sterującego jako
widoczne. Na przykład w tabeli poniżej pokazujemy, czy element sterujący powiększeniem jest
czy nie, zależnie od rozmiaru mapy i ustawień
Pole zoomControl
:
Rozmiar mapy | zoomControl |
Widoczna? |
---|---|---|
Dowolny | false |
Nie |
Dowolny | true |
Tak |
>= 200 x 200 pikseli | undefined |
Tak |
< 200 x 200 pikseli | undefined |
Nie |
Ten przykład ustawia mapę tak, aby ukryto powiększenie i wyświetl kontrolkę Skala. Pamiętaj, że nie wskazujemy bezpośrednio wyłącz domyślny interfejs użytkownika, więc te zmiany uzupełniają domyślny interfejs użytkownika. zachowanie 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;
Zobacz próbkę
Opcje sterowania
Istnieje możliwość skonfigurowania kilku elementów sterujących, co pozwala na zmianę ich działania lub zmienić swój wygląd. Element sterujący typu mapy dla: może wyglądać np. jako poziomy pasek lub menu.
Te ustawienia można zmodyfikować, modyfikując odpowiednie opcje ustawień.
w obiekcie MapOptions
po utworzeniu mapy.
Na przykład opcje zmiany ustawienia Typ mapy są podane w sekcji
mapTypeControlOptions
. Kontrolka Typ mapy może pojawić się w
jedną z tych opcji style
:
google.maps.MapTypeControlStyle.HORIZONTAL_BAR
wyświetla seria elementów sterujących w postaci przycisków na poziomym pasku, jak widać w Google. Mapy.google.maps.MapTypeControlStyle.DROPDOWN_MENU
wyświetla element sterujący umożliwiający wybór typu mapy za pomocą menu rozwijanego .google.maps.MapTypeControlStyle.DEFAULT
wyświetla działanie domyślne, które zależy od rozmiaru ekranu i może się zmienić w przyszłości. jak i w przypadku różnych wersji interfejsu API.
Pamiętaj, że w przypadku modyfikacji opcji sterowania należy jawnie włączyć
elementu sterującego oraz ustaw odpowiednią wartość MapOptions
do: true
. Na przykład: aby ustawić typ mapy
aby pokazać styl DROPDOWN_MENU
, użyj następującego kodu w obrębie
obiekt MapOptions
:
... mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } ...
Poniższy przykład pokazuje, jak zmienić pozycję domyślną stylu 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;
Zobacz próbkę
Elementy sterujące są zwykle konfigurowane podczas tworzenia mapy. Pamiętaj jednak:
możesz dynamicznie zmieniać wygląd elementów sterujących przez
wywołuje metodę setOptions()
za pomocą funkcji Map
,
i przekazywanie jej nowych opcji sterowania.
Modyfikuj elementy sterujące
Prezentację elementu sterującego określa się podczas tworzenia mapy
poprzez pola w obiekcie MapOptions
mapy. Te
pola są oznaczone poniżej:
zoomControl
włącza/wyłącza powiększenie. Domyślnie ten element sterujący jest widoczny i widoczny w prawym dolnym rogu mapy. PolezoomControlOptions
dodatkowo określaZoomControlOptions
. który ma być używany na potrzeby tego elementu sterującego.cameraControl
włącza/wyłącza sterowanie kamerą. Ten element sterujący jest domyślnie widoczny na mapach za pomocą wersji beta. PolecameraControlOptions
dodatkowo określa parametrCameraControlOptions
. który ma być używany na potrzeby tego elementu sterującego.mapTypeControl
włącza/wyłącza ustawienie typu mapy który pozwala użytkownikowi przełączać się między typami map (np. mapą i satelitą). Domyślnie ten element sterujący jest widoczny i znajduje się w lewym górnym rogu w rogu mapy. PolemapTypeControlOptions
dodatkowo określaMapTypeControlOptions
który ma być używany na potrzeby tego elementu sterującego.streetViewControl
włącza/wyłącza element sterujący Pegmana który pozwala użytkownikowi aktywować panoramę Street View. Domyślnie ten element sterujący jest widoczny i znajduje się w prawym dolnym rogu pozycję na mapie. PolestreetViewControlOptions
dodatkowo określaStreetViewControlOptions
który ma być używany na potrzeby tego elementu sterującego.rotateControl
włącza/wyłącza wygląd Obrót do sterowania orientacją zdjęć pod kątem 45°. Według domyślnie obecność elementu sterującego jest określana na podstawie obecności lub nieobecności zdjęć pod kątem 45° dla danego typu mapy przy obecnym powiększeniu i lokalizacji. Możesz zmienić działanie elementu sterującego, ustawiając mapęrotateControlOptions
, aby określićRotateControlOptions
. których użyć. Nie można wyświetlić elementu sterującego, jeśli nie są dostępne zdjęcia pod kątem 45°.scaleControl
włącza/wyłącza ustawienie skali, które zapewnia skalę mapy. Domyślnie ten element sterujący jest niewidoczny. Kiedy włączona, będzie zawsze wyświetlana w prawym dolnym rogu mapy.scaleControlOptions
dodatkowo określaScaleControlOptions
. który ma być używany na potrzeby tego elementu sterującego.fullscreenControl
włącza/wyłącza otwieraną opcję mapę w trybie pełnoekranowym. Domyślnie to ustawienie jest włączone. na komputerach i urządzeniach z Androidem. Po włączeniu pojawi się element sterujący w prawym górnym rogu mapy.fullscreenControlOptions
dodatkowo określaFullscreenControlOptions
. który ma być używany na potrzeby tego elementu sterującego.
Pamiętaj, że możesz określić opcje ustawień, które zostaną początkowo wyłączone.
Sterowanie pozycjonowaniem
Większość opcji sterujących zawiera właściwość position
(typu ControlPosition
), która wskazuje, gdzie na mapie
umieścić element sterujący. Umiejscowienie tych elementów sterujących nie jest bezwzględne. Zamiast tego:
interfejs API inteligentnie ułoży elementy sterujące,
istniejących elementów mapy lub innych elementów sterujących, bez ograniczeń (np.
rozmiar mapy).
Uwaga: nie można zagwarantować, że elementy sterujące mogą nie nakładać się na skomplikowane układy, chociaż interfejs API i spróbować je uporządkować.
Obsługiwane są te pozycje elementów sterujących:
TOP_CENTER
oznacza, że element sterujący powinien zostać umieszczony na środku u góry mapy.TOP_LEFT
oznacza, że element sterujący powinien być umieszczony wzdłuż w lewym górnym rogu mapy z „pływającymi” elementami podrzędnymi elementu sterującego w stronę środka u góry.TOP_RIGHT
oznacza, że element sterujący powinien być umieszczony wzdłuż w prawym górnym rogu mapy z „pływającymi” elementami podrzędnymi elementu sterującego w stronę środka u góry.LEFT_TOP
oznacza, że element sterujący powinien być umieszczony wzdłuż w lewym górnym rogu mapy, ale pod wszelkimi elementamiTOP_LEFT
.RIGHT_TOP
oznacza, że element sterujący powinien być umieszczony wzdłuż w prawym górnym rogu mapy, ale pod dowolnym elementemTOP_RIGHT
.LEFT_CENTER
oznacza, że element sterujący powinien zostać umieszczony po lewej stronie mapy, wyśrodkowany międzyTOP_LEFT
iBOTTOM_LEFT
pozycji.RIGHT_CENTER
oznacza, że element sterujący powinien zostać umieszczony wzdłuż prawej strony mapy, wyśrodkowany między PozycjeTOP_RIGHT
iBOTTOM_RIGHT
.LEFT_BOTTOM
oznacza, że element sterujący powinien zostać umieszczony w lewym dolnym rogu mapy, ale nad dowolnymiBOTTOM_LEFT
.RIGHT_BOTTOM
oznacza, że element sterujący powinien zostać umieszczony w prawym dolnym rogu mapy, ale nad dowolnymiBOTTOM_RIGHT
.BOTTOM_CENTER
oznacza, że element sterujący powinien zostać umieszczony na środku u dołu mapy.BOTTOM_LEFT
oznacza, że element sterujący powinien zostać umieszczony w lewym dolnym rogu mapy z wszelkimi podelementami elementu sterującego „pływający” w stronę dolnej części ekranu.BOTTOM_RIGHT
oznacza, że element sterujący powinien zostać umieszczony w prawym dolnym rogu mapy z wszelkimi podelementami elementu sterującego „pływający” w stronę dolnej części ekranu.
Pozycje te mogą się pokrywać z położeniem elementów interfejsu których miejsc docelowych nie możesz modyfikować (takich jak prawa autorskie i logo Google). W takich przypadkach elementy sterujące będą działać zgodnie z logiką określoną w następujących przypadkach: i wyświetlają się jak najbliżej pozycji.
Poniższy przykład pokazuje prostą mapę z włączonymi wszystkimi elementami sterującymi w różnych pozycji.
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;
Zobacz próbkę
Ustawienia niestandardowe
Oprócz zmiany stylu i pozycji istniejących elementów sterujących interfejsu API
mogą tworzyć własne elementy sterujące
interakcjami z użytkownikiem. Elementy sterujące
są nieruchomymi widżetami unoszącymi się na mapie w pozycji bezwzględnej, jak
w przeciwieństwie do nakładek, które przesuwają się razem z mapą bazową. Więcej
zasadniczo element sterujący to element <div>
, który
ma pozycję bezwzględną na mapie, wyświetla interfejs użytkownika oraz
obsługuje interakcję z użytkownikiem lub mapą, zazwyczaj przez zdarzenie
.
Do utworzenia własnego elementu sterującego potrzeba kilku reguł. Jednak następujące wskazówki mogą być dobrą metodą:
- Określ odpowiedni kod CSS dla elementów sterujących, które mają być wyświetlane.
- Interakcja z użytkownikiem lub mapą za pomocą modułów obsługi zdarzeń
zmiany usługi mapy lub zdarzenia użytkownika (np.
'click'
. - Utwórz element
<div>
, aby zachować kontrolę i dodać ten element do właściwościcontrols
elementuMap
.
Poniżej omawiamy każdy z tych problemów.
Rysowanie elementów sterujących niestandardowych
Sposób rysowania elementów sterujących zależy od Ciebie. Zalecamy
umieść całą prezentację kontrolną w jednym miejscu.
<div>
, możesz więc kontrolować takie elementy jak
jedną jednostkę. Wykorzystamy ten wzorzec projektowy w poniższych przykładach.
Zaprojektowanie atrakcyjnych elementów sterujących wymaga znajomości CSS i DOM. do jego struktury. Poniższy kod przedstawia funkcję tworzenia przycisku który przesuwa mapę tak, że jest wyśrodkowana 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ń pochodzących z ustawień niestandardowych
Aby element sterujący był przydatny, musi faktycznie coś zrobić. Co do kontroli
zależy od Ciebie. Element sterujący może reagować na dane wejściowe użytkownika lub może reagować
na zmiany stanu elementu Map
.
Aby odpowiadać na dane wejściowe użytkownika, używaj zasady addEventListener()
, która obsługuje obsługiwane zdarzenia DOM.
ten fragment kodu dodaje detektor dla 'click'
przeglądarki
. Zwróć uwagę, ż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); });
Udostępnianie ustawień niestandardowych
Aby mieć pewność, że elementy sterujące będą otrzymywać zdarzenia klawiatury i prawidłowo wyświetlać się czytnikom ekranu:
- W przypadku przycisków, elementów formularzy i etykiet zawsze używaj natywnych elementów HTML. Użyj tylko elementu DIV elementu jako kontenera na natywne elementy sterujące; nigdy nie używaj ponownie elementu DIV jako interaktywnego interfejsu. .
- Użyj elementu
label
, atrybututitle
lubaria-label
w odpowiednich przypadkach, aby podać informacje o elemencie interfejsu.
Pozycjonowanie elementów sterujących niestandardowych
Niestandardowe elementy sterujące są umieszczane na mapie w odpowiednich miejscach
położenia w controls
obiektu Map
usłudze. Ta właściwość zawiera tablicę funkcji
google.maps.ControlPosition
Do sekcji
mapę, dodając Node
(zwykle <div>
)
do odpowiedniego ControlPosition
. (Informacje na temat tych
patrz: Sterowanie pozycjonowaniem
above.)
Każdy element ControlPosition
przechowuje MVCArray
z
elementy sterujące wyświetlane w tym miejscu. W rezultacie po dodaniu elementów sterujących lub
usunięty z pozycji, interfejs API odpowiednio zaktualizuje elementy sterujące.
Interfejs API umieszcza elementy sterujące na każdej pozycji w kolejności
właściwość index
; elementy sterujące o niższym indeksie są umieszczane jako pierwsze.
Na przykład 2 niestandardowe elementy sterujące na pozycji BOTTOM_RIGHT
będą
jest układany według tego porządku indeksu, przy czym niższe wartości indeksów
pierwszeństwo. Domyślnie wszystkie niestandardowe elementy sterujące są umieszczane po umieszczeniu
wszystkich domyślnych ustawieniach interfejsu API. Możesz zmienić to zachowanie, ustawiając właściwość index
kontrolki na wartość ujemną. Ustawienia niestandardowe
nie może znajdować się po lewej stronie logo ani po prawej stronie
prawa autorskie.
Ten kod tworzy nowy niestandardowy element sterujący (jego konstruktor nie jest
) 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 niestandardowego elementu sterującego
Poniższe ustawienie jest proste (choć niezbyt przydatne) oraz
łączy wzory pokazane powyżej. Ten element sterujący reaguje na DOM
'click'
zdarzeń z określonym domyślnym wyśrodkowaniem mapy
lokalizacja:
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;
Zobacz próbkę
Dodawanie stanu do elementów sterujących
Elementy sterujące mogą również zapisywać stan. Poniższy przykład jest podobny do tego.
wyświetlane wcześniej, ale element sterujący zawiera dodatkową opcję „Ustaw dom” który
ustawia opcję wyświetlania nowej lokalizacji domu. Robimy to przez utworzenie
właściwość home_
w kontroli do przechowywania tego stanu oraz
dla danego stanu funkcji pobierania i seterów.
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;