Elementy sterujące

Wybierz platformę: Android iOS JavaScript

Omówienie ustawień

Mapy wyświetlane za pomocą interfejsu Maps JavaScript API zawierają elementy interfejsu, które umożliwiają użytkownikom interakcję z mapą. Te elementy są nazywane kontrolkami i możesz uwzględnić w aplikacji ich różne wersje. Możesz też nic nie robić i pozwolić interfejsowi Maps JavaScript API obsługiwać wszystkie elementy sterujące.

Poniższa mapa przedstawia domyślny zestaw elementów sterujących wyświetlanych przez interfejs Maps JavaScript API:

Zgodnie z ruchem wskazówek zegara od lewego górnego rogu: Typ mapy, Pełny ekran, Aparat, Street View, Skróty klawiszowe.

Poniżej znajdziesz pełną listę elementów sterujących, których możesz używać na mapach:

  • Element sterujący Typ mapy jest dostępny w formie menu lub poziomego paska przycisków, co umożliwia użytkownikowi wybór typu mapy (ROADMAP, SATELLITE, HYBRID lub TERRAIN). Ten element sterujący domyślnie pojawia się w lewym górnym rogu mapy.
  • Element sterujący pełnym ekranem 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. Dlatego na urządzeniach z iOS nie widać elementu sterującego pełnym ekranem.
  • Funkcja Sterowanie kamerą obejmuje elementy sterujące powiększaniem i przesuwaniem.
  • Element sterujący Street View zawiera ikonę Pegmana, którą można przeciągnąć na mapę, aby włączyć Street View. Ten element sterujący jest domyślnie widoczny w prawym dolnym rogu mapy.
  • Element sterujący obracaniem zapewnia połączenie opcji pochylania i obracania w przypadku map zawierających zdjęcia 3D. Ten element sterujący jest domyślnie wyświetlany w prawym dolnym rogu mapy. Więcej informacji znajdziesz w omówieniu 3D.
  • Kontrolka Skala wyświetla element skali mapy. Ta kontrolka jest domyślnie wyłączona.
  • Element sterujący skrótami klawiszowymi wyświetla listę skrótów klawiszowych do interakcji z mapą.

Nie masz bezpośredniego dostępu do tych elementów sterujących mapą ani nie możesz ich modyfikować. Zamiast tego możesz modyfikować pola MapOptions mapy, które wpływają na widoczność i prezentację elementów sterujących. Możesz dostosować sposób wyświetlania elementów sterujących podczas tworzenia instancji mapy (za pomocą odpowiedniego parametru MapOptions) lub dynamicznie modyfikować mapę, wywołując funkcję setOptions(), aby zmienić opcje mapy.

Nie wszystkie te mechanizmy kontroli są domyślnie włączone. Aby dowiedzieć się więcej o domyślnym zachowaniu interfejsu użytkownika (i jak je modyfikować), zobacz sekcję Domyślny interfejs użytkownika poniżej.

Domyślny interfejs

Domyślnie wszystkie kontrolki znikają, jeśli mapa jest zbyt mała (200x200px). Można zmienić to zachowanie, jawnie ustawiając kontrolkę jako widoczną. Zobacz Dodawanie elementów sterujących do mapy.

Wygląd i zachowanie elementów sterujących są takie same na urządzeniach mobilnych i stacjonarnych, z wyjątkiem kontrolki pełnoekranowej (opis zachowania znajduje się na liście elementów sterujących).

Ponadto obsługa klawiatury jest domyślnie włączona na wszystkich urządzeniach.

Wyłączanie domyślnego interfejsu

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 Maps JavaScript API. Nie ma to jednak wpływu na gesty myszy i skróty klawiaturowe na mapie bazowej, które są kontrolowane odpowiednio przez właściwości gestureHandling i keyboardShortcuts.

Poniższy kod wyłącza przyciski interfejsu użytkownika:

TypeScript

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.ts

JavaScript

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.js
Zobacz przykład

Wypróbuj przykład

Dodaj elementy sterujące do mapy

Możesz dostosować interfejs, usuwając, dodając lub modyfikując jego zachowanie lub elementy sterujące, i upewnić się, że przyszłe aktualizacje nie zmienią tego zachowania. Jeśli chcesz tylko dodać lub zmodyfikować istniejące zachowanie, musisz upewnić się, że kontrolka została jawnie dodana do aplikacji.

Niektóre elementy sterujące pojawiają się na mapie domyślnie, inne zaś nie pojawią się, dopóki specjalnie o to nie poprosisz. Dodawanie i usuwanie kontrolek z mapy jest określone w następujących polach obiektu MapOptions, które należy ustawić na true, aby je wyświetlić, lub na false, aby je ukryć:

{
  cameraControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

Domyślnie wszystkie kontrolki znikają, jeśli mapa jest mniejsza niż 200x200px. Można zmienić to zachowanie, jawnie ustawiając kontrolkę jako widoczną. Na przykład poniższa tabela pokazuje, czy kontrolka kamery jest widoczna, czy nie, na podstawie rozmiaru mapy i ustawienia pola cameraControl:

Rozmiar mapy cameraControl Widoczny?
Dowolna false Nie
Dowolna true Tak
>= 200x200px undefined Tak
< 200x200px undefined Nie

Poniższy przykład ustawia mapę tak, aby ukryć kontrolkę kamery i wyświetlić kontrolkę skali. Należy pamiętać, że nie wyłączamy jawnie domyślnego interfejsu użytkownika, więc te modyfikacje uzupełniają domyślne zachowanie interfejsu użytkownika.

TypeScript

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.ts

JavaScript

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.js
Zobacz przykład

Wypróbuj przykład

Opcje sterowania

Niektóre elementy sterujące są konfigurowalne, co pozwala na zmianę ich zachowania lub wyglądu. Na przykład kontrolka Typ mapy może być wyświetlana w postaci poziomego paska lub menu rozwijanego.

Te kontrolki modyfikuje się, zmieniając odpowiednie pola opcji kontrolek w obiekcie MapOptions podczas tworzenia mapy.

Na przykład opcje zmiany kontrolki typu mapy są wskazane w polu mapTypeControlOptions. Kontrolka 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 pokazano w Mapach Google.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU wyświetla pojedynczy przycisk umożliwiający wybór typu mapy za pomocą menu rozwijanego.
  • google.maps.MapTypeControlStyle.DEFAULT wyświetla domyślne zachowanie, które zależy od rozmiaru ekranu i może ulec zmianie w przyszłych wersjach interfejsu API.

Należy pamiętać, że jeśli zmodyfikujesz jakiekolwiek opcje kontrolki, musisz jawnie włączyć kontrolkę, ustawiając odpowiednią wartość MapOptions na true. Na przykład, aby ustawić kontrolkę typu mapy tak, aby wyświetlała styl DROPDOWN_MENU, użyj następującego kodu w obiekcie MapOptions:

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

Poniższy przykład pokazuje, jak zmienić domyślne położenie i styl kontrolek.

TypeScript

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.ControlPosition.TOP_CENTER,
    },
});
index.ts

JavaScript

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.ControlPosition.TOP_CENTER,
    },
});
index.js
Zobacz przykład

Wypróbuj przykład

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.

Modyfikuj elementy sterujące

Prezentację elementu sterującego określasz podczas tworzenia mapy za pomocą pól w obiekcie MapOptions mapy. Poniżej znajdziesz oznaczenia tych pól:

  • cameraControl włącza lub wyłącza sterowanie kamerą, które umożliwia użytkownikowi powiększanie i przesuwanie mapy. Ten element sterujący jest domyślnie widoczny na wszystkich mapach. Pole cameraControlOptions dodatkowo określa CameraControlOptions, które ma być używane w przypadku tego elementu sterującego.
  • mapTypeControl włącza lub wyłącza kontrolkę typu mapy, która umożliwia użytkownikowi przełączanie się między typami map (np. mapa i zdjęcie satelitarne); Domyślnie ten element sterujący jest widoczny i wyświetla się w lewym górnym rogu mapy. Pole mapTypeControlOptions dodatkowo określa MapTypeControlOptions, które ma być używane w przypadku tego elementu sterującego.
  • streetViewControl włącza lub wyłącza element sterujący Pegman, który umożliwia użytkownikowi aktywowanie panoramy Street View. Domyślnie ten element sterujący jest widoczny i wyświetla się w prawym dolnym rogu mapy. Pole streetViewControlOptions dodatkowo określa StreetViewControlOptions, które ma być używane w przypadku tego elementu sterującego.
  • rotateControl włącza lub wyłącza wyświetlanie elementu sterującego obrotem, który umożliwia kontrolowanie orientacji obrazów 3D. Domyślnie obecność elementu sterującego jest określana na podstawie tego, czy dla danego typu mapy w bieżącym powiększeniu i lokalizacji są dostępne zdjęcia 3D. Możesz zmienić działanie elementu sterującego, ustawiając parametr rotateControlOptions mapy, aby określić parametr RotateControlOptions, który ma być używany. Element sterujący będzie widoczny tylko na podstawowych mapach 3D.
  • scaleControl włącza lub wyłącza element sterujący Skala, który wyświetla skalę mapy. Domyślnie ten element sterujący nie jest widoczny. Gdy jest włączony, zawsze pojawia się w prawym dolnym rogu mapy. Element scaleControlOptions dodatkowo określa ScaleControlOptions, którego należy użyć w przypadku tego elementu sterującego.
  • fullscreenControl włącza lub wyłącza element sterujący, który otwiera mapę w trybie pełnoekranowym. To ustawienie jest domyślnie włączone na komputerach i urządzeniach z Androidem. Gdy jest włączony, element sterujący pojawia się w prawym górnym rogu mapy. Element fullscreenControlOptions dodatkowo określa FullscreenControlOptions, którego należy użyć w przypadku tego elementu sterującego.

Pamiętaj, że możesz określić opcje dla elementów sterujących, które początkowo wyłączysz.

Pozycjonowanie elementów sterujących

Większość opcji sterowania zawiera właściwość position (typu ControlPosition), która określa, gdzie na mapie ma się znajdować element sterujący. Położenie tych elementów sterujących nie jest bezwzględne. Zamiast tego interfejs API inteligentnie rozmieszcza elementy sterujące, dopasowując je do istniejących elementów mapy lub innych elementów sterujących w ramach określonych ograniczeń (np. rozmiaru mapy).

Istnieją 2 rodzaje pozycji kontrolnych: starsze i logiczne. Zalecamy używanie wartości logicznych, aby automatycznie obsługiwać konteksty układu od lewej do prawej (LTR) i od prawej do lewej (RTL). Zobacz przewodnik

W poniższych tabelach przedstawiono obsługiwane pozycje elementów sterujących w kontekście od lewej do prawej i od prawej do lewej.

Pozycje od lewej do prawej

Pozycja (kontekst LTR) Stała logiczna (zalecana) Starsza stała
Lewy górny róg BLOCK_START_INLINE_START TOP_LEFT
Top Center BLOCK_START_INLINE_CENTER TOP_CENTER
Prawy górny róg BLOCK_START_INLINE_END TOP_RIGHT
Lewy górny INLINE_START_BLOCK_START LEFT_TOP
Lewy środek INLINE_START_BLOCK_CENTER LEFT_CENTER
Lewy dolny róg INLINE_START_BLOCK_END LEFT_BOTTOM
Prawa górna INLINE_END_BLOCK_START RIGHT_TOP
Right Center INLINE_END_BLOCK_CENTER RIGHT_CENTER
Prawy dolny INLINE_END_BLOCK_END RIGHT_BOTTOM
Lewy dolny róg BLOCK_END_INLINE_START BOTTOM_LEFT
Środek dołu BLOCK_END_INLINE_CENTER BOTTOM_CENTER
Prawy dolny róg BLOCK_END_INLINE_END BOTTOM_RIGHT

Pozycje RTL

Pozycja (kontekst RTL) Stała logiczna (zalecana) Starsza stała
Prawy górny róg BLOCK_START_INLINE_START TOP_RIGHT
Top Center BLOCK_START_INLINE_CENTER TOP_CENTER
Lewy górny róg BLOCK_START_INLINE_END TOP_LEFT
Prawa górna INLINE_START_BLOCK_START RIGHT_TOP
Right Center INLINE_START_BLOCK_CENTER RIGHT_CENTER
Prawy dolny INLINE_START_BLOCK_END RIGHT_BOTTOM
Lewy górny INLINE_END_BLOCK_START LEFT_TOP
Lewy środek INLINE_END_BLOCK_CENTER LEFT_CENTER
Lewy dolny róg INLINE_END_BLOCK_END LEFT_BOTTOM
Prawy dolny róg BLOCK_END_INLINE_START BOTTOM_RIGHT
Środek dołu BLOCK_END_INLINE_CENTER BOTTOM_CENTER
Lewy dolny róg BLOCK_END_INLINE_END BOTTOM_LEFT

Kliknij etykiety, aby przełączać mapę między trybami od lewej do prawej i od prawej do lewej.

Pamiętaj, że te pozycje mogą pokrywać się z pozycjami elementów interfejsu, których umiejscowienia nie możesz modyfikować (np. informacji o prawach autorskich i logo Google). W takich przypadkach elementy sterujące będą wyświetlane zgodnie z logiką opisaną dla każdego miejsca i jak najbliżej wskazanego położenia. Nie możemy zagwarantować, że elementy sterujące nie będą się nakładać na siebie w przypadku skomplikowanych układów, ale interfejs API będzie próbował je inteligentnie rozmieszczać.

Poniższy przykład przedstawia podstawową mapę 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;
index.ts

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;
index.js
Zobacz przykład

Wypróbuj przykład

Sterowanie niestandardowe

Oprócz modyfikowania stylu i pozycji istniejących elementów sterujących interfejsu API możesz tworzyć własne elementy sterujące, które będą obsługiwać interakcje z użytkownikiem. Elementy sterujące to statyczne widżety, które znajdują się na wierzchu mapy w pozycjach bezwzględnych. Różnią się od nakładek, które poruszają się wraz z mapą. Bardziej zasadniczo element sterujący to element <div>, który ma bezwzględne położenie na mapie, wyświetla użytkownikowi interfejs i obsługuje interakcję z użytkownikiem lub mapą, zwykle za pomocą procedury obsługi zdarzeń.

Aby utworzyć własny element sterujący, musisz zastosować kilka reguł. Poniższe wskazówki mogą jednak stanowić sprawdzone metody:

  • Określ odpowiedni kod CSS dla elementów sterujących, które mają być wyświetlane.
  • Obsługuj interakcje użytkownika z mapą za pomocą funkcji obsługi zdarzeń dotyczących zmian właściwości mapy lub zdarzeń użytkownika (np. zdarzeń 'click').
  • Utwórz element <div>, który będzie zawierać kontrolkę, i dodaj go do właściwości controls elementu Map.

Każda z tych kwestii jest omówiona poniżej.

Rysowanie niestandardowych elementów sterujących

Sposób rysowania elementu sterującego zależy od Ciebie. Zalecamy umieszczenie wszystkich elementów sterujących w jednym elemencie <div>, aby można było nimi manipulować jako jedną jednostką. W przykładach poniżej użyjemy tego wzorca projektowego.

Projektowanie atrakcyjnych elementów sterujących wymaga pewnej wiedzy o CSS i strukturze DOM. Poniższe przykłady kodu pokazują dodawanie niestandardowego elementu sterującego za pomocą deklaratywnego kodu HTML i metod programowych.

Deklaratywny CSS

Poniższe style CSS zapewniają wygląd zgodny z domyślnymi elementami sterującymi. Użyj tych stylów w obu poniższych przykładach: 

.streetview-toggle-button {
  align-items: center;
  background: white;
  border: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  color: rgb(86, 86, 86);
  cursor: pointer;
  display: flex;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  height: 40px;
  justify-content: center;
  margin: 10px 0;
  padding: 0 17px;
}

.streetview-toggle-button:hover {
  background: #f4f4f4;
  color: #000;
}

Deklaratywny HTML

Te fragmenty kodu pokazują, jak deklaratywnie utworzyć niestandardowy element sterujący. W HTML-u do umieszczenia elementu sterującego używany jest element DIV z identyfikatorem container. Jest on zagnieżdżony w elemencie gmp-map, a przycisk jest dodawany do elementu DIV. Atrybut slot jest ustawiony na control-inline-start-block-start, aby umieścić element sterujący w lewym górnym rogu mapy. 

<gmp-map
  center="41.027748173921374, -92.41852445367961"
  zoom="13"
  map-id="DEMO_MAP_ID">
  <div id="container" slot="control-inline-start-block-start">
    <input type="button"
    id="streetview-toggle-button"
    class="button"
    value="Click this button" />
  </div>
</gmp-map>

W JavaScript getElementById() służy do znajdowania elementu DIV i przycisku, do przycisku dodawany jest detektor zdarzeń, a przycisk jest dołączany do elementu DIV. 

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Get the control button from the HTML page.
const controlButton = document.getElementById("streetview-toggle-button");

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

Programowy kod JavaScript

Ten fragment kodu pokazuje, jak programowo utworzyć element sterujący przycisku. Style CSS są zdefiniowane powyżej. 

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Position the control in the top left corner of the map.
container.slot = "control-block-start-inline-start";

// Create the control.
const controlButton = document.createElement("button");
controlButton.classList.add("streetview-toggle-button");
controlButton.textContent = "Click this button";
controlButton.type = "button";

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

Obsługa zdarzeń z niestandardowych elementów sterujących

Aby kontrolka była przydatna, musi coś robić. To Ty decydujesz, co ma robić element sterujący. Element może reagować na dane wejściowe użytkownika lub na zmiany stanu Map.

Aby reagować na dane wejściowe użytkownika, użyj funkcji addEventListener(), która obsługuje obsługiwane zdarzenia DOM. Ten fragment kodu dodaje detektor zdarzenia 'click' w przeglądarce. Pamiętaj, że to zdarzenie jest odbierane z 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 niestandardowych elementów sterujących

Aby mieć pewność, że elementy sterujące odbierają zdarzenia klawiatury i są prawidłowo odczytywane przez czytniki ekranu:

  • Zawsze używaj natywnych elementów HTML w przypadku przycisków, elementów formularza i etykiet. Używaj elementu DIV jako kontenera do przechowywania natywnych elementów sterujących. Nigdy nie używaj elementu DIV jako interaktywnego elementu interfejsu.
  • Aby podać informacje o elemencie interfejsu, użyj odpowiednio elementu label, atrybutu title lub atrybutu aria-label.

Umieszczanie niestandardowych elementów sterujących

Użyj atrybutu slot, aby określić położenie elementów sterujących, podając potrzebną pozycję. Więcej informacji o tych pozycjach znajdziesz w sekcji Kontrolowanie pozycji powyżej.

Każdy element ControlPosition przechowuje MVCArray elementów sterujących wyświetlanych w tej pozycji. Dzięki temu, gdy elementy sterujące zostaną dodane do pozycji lub z niej usunięte, interfejs API odpowiednio je zaktualizuje.

Poniższy kod tworzy nowy element sterujący (jego konstruktor nie jest widoczny) i dodaje go do mapy w pozycji BLOCK_START_INLINE_END (w prawym górnym rogu w kontekście od lewej do prawej).

// 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);

// Push the control to the BLOCK_START_INLINE_END position.
innerMap.controls[google.maps.ControlPosition.BLOCK_START_INLINE_END].push(centerControlDiv);

Aby deklaratywnie ustawić pozycję elementu sterującego, ustaw atrybut slot w HTML:

<gmp-map center="30.72851568848909, -81.54675994068873" zoom="12">
  <div slot="control-block-start-inline-end">
    <!-- Control HTML -->
  </div>
</gmp-map>

Przykład niestandardowego elementu sterującego

Poniższy mechanizm kontroli jest prosty (choć niezbyt przydatny) i łączy wzorce pokazane powyżej. Ten element sterujący reaguje na zdarzenia DOM 'click', wyśrodkowując mapę w 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;
index.ts

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;
index.js
Zobacz przykład

Wypróbuj przykład

Dodawanie stanu do elementów sterujących

Elementy sterujące mogą też przechowywać stan. Poniższy przykład jest podobny do poprzedniego, ale element sterujący zawiera dodatkowy przycisk „Ustaw dom”, który ustawia nowy dom. W tym celu tworzymy w kontrolce właściwość home_, w której przechowujemy ten stan, oraz udostępniamy metody pobierania i ustawiania tego stanu.

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;
index.ts

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;
index.js
Zobacz przykład

Wypróbuj przykład