Opcje

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Wybierz platformę: Android iOS JavaScript

Przegląd opcji

Mapy wyświetlane przez interfejs Maps JavaScript API zawierają elementy interfejsu, które umożliwiają użytkownikom interakcję z mapą. Te elementy są nazywane elementami sterującymi. W aplikacji możesz umieszczać ich różne warianty. Możesz też nie podejmować żadnych działań i pozwolić interfejsowi JavaScript JavaScript Map Google na obsługę wszystkich elementów sterujących.

Ta mapa przedstawia domyślny zestaw opcji wyświetlanych przez Maps JavaScript API:

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

  • Elementy sterujące powiększeniem wyświetlają przyciski „+” i „-” służące do zmiany poziomu powiększenia mapy. Ten element domyślnie pojawia się w prawym dolnym rogu mapy.
  • Element sterujący typu mapy jest dostępny w formie menu lub poziomego przycisku, który pozwala użytkownikowi wybrać typ mapy (ROADMAP, SATELLITE, HYBRID lub TERRAIN). Ten element domyślnie pojawia się w lewym górnym rogu mapy.
  • Sterowanie Street View zawiera ikonę Pegmana, którą można przeciągnąć na mapę, by włączyć Street View. Jest ona domyślnie widoczna w prawym dolnym rogu mapy.
  • Sterowanie obracaniem umożliwia połączenie opcji przechylania i obracania w przypadku map zawierających zdjęcia skośne. Jest ona domyślnie widoczna w prawym dolnym rogu mapy. Więcej informacji znajdziesz na zdjęciach pod kątem 45°.
  • Sterowanie skalowanie wyświetla element skali mapy. Ta opcja jest domyślnie wyłączona.
  • Pełnoekranowy element sterujący umożliwia otwarcie mapy 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. Element sterujący na pełnym ekranie nie jest więc widoczny na urządzeniach z iOS.
  • Sterowanie skrótami wyświetla listę skrótów klawiszowych używanych do interakcji z mapą.

Nie masz bezpośredniego dostępu do tych elementów sterujących mapy ani ich nie zmieniasz. Zamiast tego modyfikujesz pola MapOptions mapy, które mają wpływ na widoczność i prezentację elementów sterujących. Możesz dostosować prezentację przy tworzeniu wystąpienia mapy (przy użyciu odpowiedniego elementu MapOptions) lub dynamicznie modyfikować mapę, wywołując opcję setOptions(), aby zmienić opcje mapy.

Nie wszystkie te ustawienia są domyślnie włączone. Więcej informacji o domyślnym działaniu interfejsu (i sposobie jego zmiany) znajdziesz poniżej, w sekcji Domyślny interfejs użytkownika.

Domyślny interfejs użytkownika

Domyślnie, jeśli mapa jest za mała (200 x 200 pikseli), wszystkie elementy sterujące znikają. Możesz zmienić ten sposób działania, ustawiając opcję wyświetlania jako widoczną. Zobacz Dodawanie opcji do mapy.

Elementy sterujące i wygląd elementów sterujących na urządzeniach mobilnych i komputerach są takie same jak w przypadku elementów pełnoekranowych (zobacz działanie opisane na liście elementów sterujących).

Dodatkowo 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 UI w interfejsie API JavaScript Map Google. Nie ma to jednak wpływu na gesty myszy ani skróty klawiszowe na mapie podstawowej, które są kontrolowane odpowiednio przez właściwości gestureHandling i 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 przykład

Fragment

Dodawanie elementów sterujących do mapy

Możesz dostosować interfejs przez usunięcie, dodanie lub zmodyfikowanie działania interfejsu użytkownika lub jego ustawień, aby przyszłe zmiany nie powodowały takiej sytuacji. Jeśli chcesz tylko dodać lub zmodyfikować istniejące działanie, musisz bezpośrednio dodać to ustawienie do aplikacji.

Niektóre ustawienia pojawiają się domyślnie na mapie, a inne nie będą widoczne, chyba że wyraźnie o to poprosisz. Aby dodać lub usunąć elementy sterujące z mapy, musisz określić te pola obiektu MapOptions, które mają być ustawione jako widoczne (true), lub false, aby je ukryć:

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

Domyślnie, jeśli mapa jest mniejsza niż 200 x 200 pikseli, znikną wszystkie elementy sterujące. Możesz zmienić ten sposób działania, ustawiając opcję wyświetlania jako widoczną. Na przykład ta tabela pokazuje, czy elementy sterujące powiększeniem są widoczne, zależnie od rozmiaru mapy i ustawień pola zoomControl:

Rozmiar mapy zoomControl Widoczne?
Dowolny false Nie
Dowolny true Tak
>= 200 x 200 piks. undefined Tak
< 200 x 200 pikseli undefined Nie

Poniższy przykład pokazuje, jak ukryć mapę, aby ukryć element sterujący powiększeniem i wyświetlić element sterujący skalowaniem. Pamiętaj, że nie wyłączamy interfejsu domyślnego, więc te zmiany są dodatkiem do jego domyślnego działania.

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 przykład

Fragment

Opcje sterowania

Można skonfigurować kilka elementów sterujących, co pozwala zmienić ich działanie lub wygląd. Typ mapy może mieć postać poziomego paska lub menu rozwijanego.

Opcje te są modyfikowane przez modyfikowanie odpowiednich pól opcji elementu sterującego w obiekcie MapOptions podczas tworzenia mapy.

Na przykład w polu mapTypeControlOptions znajdziesz opcje pozwalające zmienić typ mapy. Typ mapy może się pojawić w jednej z tych opcji style:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR wyświetla masę elementów sterujących w postaci przycisków na poziomym pasku pokazanych w Mapach Google.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU wyświetla jeden przycisk, który pozwala wybrać typ 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 przyszłych wersjach interfejsu API.

Jeśli zmieniasz jakieś opcje sterowania, musisz też włączyć to ustawienie, ustawiając odpowiednią wartość MapOptions na true. Aby na przykład ustawić typ mapy tak, aby wyświetlał styl DROPDOWN_MENU, użyj tego kodu w obiekcie MapOptions:

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

Poniższy przykład pokazuje, jak zmienić domyślną pozycję 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;
Zobacz przykład

Fragment

Elementy sterujące są zwykle konfigurowane podczas tworzenia mapy. Możesz jednak zmienić sposób wyświetlania elementów sterujących, wywołując metodę Map za pomocą metody setOptions(), przekazując jej nowe opcje sterowania.

Modyfikuj elementy sterujące

Prezentację możesz określić podczas tworzenia mapy za pomocą pól w obiekcie MapOptions mapy. Te pola są oznaczone poniżej:

  • zoomControl włącza/wyłącza element sterujący powiększeniem. Domyślnie ten element jest widoczny w prawym dolnym rogu mapy. Pole zoomControlOptions dodatkowo określa pole ZoomControlOptions, które ma być używane w przypadku tego ustawienia.
  • mapTypeControl włącza lub wyłącza typ mapy, który pozwala użytkownikowi przełączać się między typami map (takimi jak Mapa i Satelita). Domyślnie ten element jest widoczny w lewym górnym rogu mapy. Pole mapTypeControlOptions dodatkowo określa pole MapTypeControlOptions, które ma być używane w przypadku tego ustawienia.
  • streetViewControl umożliwia włączanie i wyłączanie Pegmana, dzięki któremu użytkownik może aktywować panoramę Street View. Domyślnie ten element jest widoczny w prawym dolnym rogu mapy. Pole streetViewControlOptions dodatkowo określa pole StreetViewControlOptions, które ma być używane w przypadku tego ustawienia.
  • rotateControl umożliwia włączanie/wyłączanie wyglądu elementu sterującego obracaniem w celu zmiany orientacji zdjęć 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 aktualnym powiększeniu i lokalizacji. Możesz zmienić działanie elementu sterującego, ustawiając rotateControlOptions mapy, by określić RotateControlOptions. Nie możesz włączyć tego ustawienia, jeśli obecnie nie są dostępne żadne zdjęcia pod kątem 45°.
  • scaleControl włącza/wyłącza opcję wagi, która zapewnia prostą skalę mapy. Domyślnie ten element nie jest widoczny. Po włączeniu jest ona zawsze widoczna w prawym dolnym rogu mapy. scaleControlOptions określa dodatkowo ScaleControlOptions do użycia w tym ustawieniu.
  • fullscreenControl włącza lub wyłącza element sterujący, który otwiera mapę w trybie pełnoekranowym. Domyślnie ta opcja jest domyślnie włączona na komputerach i urządzeniach z Androidem. Po włączeniu tej opcji pojawi się ona w prawym górnym rogu mapy. fullscreenControlOptions określa dodatkowo FullscreenControlOptions do użycia w tym ustawieniu.

Pamiętaj, że możesz określić opcje ustawień, które są początkowo wyłączone.

Pozycjonowanie sterowania

Większość opcji sterujących zawiera właściwość position (typ ControlPosition), która wskazuje na mapie, gdzie umieścić element sterujący. Położenie tych elementów sterujących nie jest absolutne. Zamiast tego interfejs ten będzie inteligentnie rozmieszczać elementy sterujące, przepływając wokół istniejących elementów mapy lub innych elementów sterujących przy określonych ograniczeniach (takich jak rozmiar mapy).

Uwaga: nie można zagwarantować, że elementy sterujące nie będą się nakładać przy skomplikowanych układach, ale interfejs API spróbuje je rozmieścić.

Obsługiwane są te pozycje sterowania:

  • TOP_CENTER wskazuje, że element sterujący powinien znajdować się wzdłuż górnej krawędzi mapy.
  • TOP_LEFT wskazuje, że element sterujący powinien być umieszczony w lewym górnym rogu mapy, a wszystkie podelementy sterujące – „pływające” u góry.
  • TOP_RIGHT wskazuje, że element sterujący powinien być umieszczony w prawym górnym rogu mapy, a wszystkie podelementy sterujące – „pływające” u góry.
  • LEFT_TOP wskazuje, że element sterujący powinien być umieszczony w lewym górnym rogu mapy, ale pod elementami TOP_LEFT.
  • RIGHT_TOP wskazuje, że element sterujący powinien być umieszczony w prawym górnym rogu mapy, ale pod elementami TOP_RIGHT.
  • LEFT_CENTER wskazuje, że element sterujący powinien znajdować się przy lewej krawędzi mapy, wyśrodkowany między pozycjami TOP_LEFT i BOTTOM_LEFT.
  • RIGHT_CENTER wskazuje, że element sterujący powinien być umieszczony po prawej stronie mapy i wyśrodkowany między pozycjami TOP_RIGHT i BOTTOM_RIGHT.
  • LEFT_BOTTOM wskazuje, że element sterujący powinien być umieszczony w lewym dolnym rogu mapy, ale nad wszystkimi elementami BOTTOM_LEFT.
  • RIGHT_BOTTOM wskazuje, że element sterujący powinien znajdować się w prawym dolnym rogu mapy, ale nad wszystkimi elementami BOTTOM_RIGHT.
  • BOTTOM_CENTER wskazuje, że element sterujący powinien znajdować się wzdłuż dolnej części mapy.
  • BOTTOM_LEFT wskazuje, że element sterujący powinien być umieszczony w lewym dolnym rogu mapy, a wszystkie podelementy sterujące – „pływające” u dołu pośrodku.
  • BOTTOM_RIGHT wskazuje, że element sterujący powinien być umieszczony w prawym dolnym rogu mapy, a wszystkie podelementy sterujące – „pływające” u dołu pośrodku.

Pozycja ta może się różnić od pozycji elementów interfejsu, których nie możesz zmieniać (np. praw autorskich i logo Google). W takich przypadkach elementy sterujące będą działać zgodnie z logiką określoną dla każdej pozycji i jak najbliżej siebie we wskazanym miejscu.

Poniższy przykład pokazuje prostą mapę z włączonymi wszystkimi elementami sterującymi i różnymi pozycjami.

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 przykład

Fragment

Elementy sterujące

Oprócz modyfikacji stylu i położenia istniejących elementów sterujących interfejsu API możesz też utworzyć własne elementy sterujące w celu obsługi interakcji z użytkownikiem. Elementy sterujące to nieruchome widżety, które unoszą się nad mapą w bezwzględnych miejscach docelowych, w przeciwieństwie do nakładek, które poruszają się po mapie. 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ą modułu obsługi zdarzeń.

Aby utworzyć własną kontrolę niestandardową, potrzebujesz tylko kilku reguł. Sprawdzone metody mogą jednak obejmować te wskazówki:

  • Określ CSS, który odpowiada elementom sterującym do wyświetlenia.
  • Obsługuj interakcje z użytkownikiem lub mapą za pomocą modułów obsługi zdarzeń związanych ze zmianami właściwości mapy lub zdarzeniami użytkowników (np. zdarzeniami 'click').
  • Utwórz element <div>, który zawiera element sterujący, i dodaj go do właściwości controls właściwości Map.

Każdy z nich został opisany poniżej.

Rysunki niestandardowe

Sposób rysowania zależy wyłącznie od Ciebie. Ogólnie rzecz biorąc, zalecamy umieszczenie całej prezentacji kontrolnej w jednym elemencie <div>, tak aby można było sterować elementem sterującym jako 1 jednostka. Użyjemy tego wzoru w przykładach poniżej.

Projektowanie atrakcyjnych elementów sterujących wymaga pewnej wiedzy na temat CSS i struktury DOM. Poniższy kod pokazuje funkcję tworzenia elementu przycisku, który przesuwa mapę do środka w 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 ustawień niestandardowych

Aby element sterujący był użyteczny, musi w rzeczywistości coś zrobić. Zależy to tylko od Ciebie. Element sterujący może reagować na dane wejściowe użytkownika lub na zmiany stanu Map.

Aby odpowiadać na pytania użytkowników, używaj metody addEventListener(), która obsługuje obsługiwane zdarzenia DOM. Ten fragment kodu dodaje detektor zdarzenia 'click' przeglądarki. 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);
});

Dostęp do ustawień niestandardowych

Aby elementy sterujące odbierały zdarzenia klawiatury i prawidłowo wyświetlały się w czytnikach ekranu:

  • Zawsze używaj natywnych elementów HTML na potrzeby przycisków, elementów formularzy i etykiet. Użyj elementu DIV jako kontenera do obsługi natywnych elementów sterujących. Nigdy nie używaj DIV jako interaktywnego elementu interfejsu.
  • Aby podać informacje o elemencie interfejsu, w razie potrzeby użyj elementu label, atrybutu title lub atrybutu aria-label.

Pozycjonowanie: ustawienia niestandardowe

Pozycje niestandardowe są ustalane na mapie przez umieszczenie ich we właściwych miejscach we właściwości controls obiektu Map. Ta właściwość zawiera tablicę google.maps.ControlPosition. Aby dodać do mapy element sterujący, dodaj Node (zwykle <div>) do odpowiedniego ControlPosition. (Informacje na temat tych pozycji można znaleźć w sekcji Kontrola położenia powyżej).

Każdy element ControlPosition przechowuje MVCArray elementów sterujących umieszczonych w tej pozycji. Dlatego gdy elementy sterujące zostaną dodane do pozycji lub z niej usunięte, interfejs API odpowiednio zaktualizuje elementy sterujące.

Interfejs API umieszcza elementy sterujące w każdym miejscu w kolejności właściwości index. Elementy sterujące o niższym indeksie są umieszczane jako pierwsze. Na przykład 2 ustawienia niestandardowe w pozycji BOTTOM_RIGHT zostaną wdrożone zgodnie z tą kolejnością indeksów, przy czym pierwszeństwo będą miały niższe wartości indeksu. Domyślnie wszystkie niestandardowe elementy sterujące są umieszczane po domyślnych ustawieniach interfejsu API. Możesz zmienić ten sposób działania, ustawiając właściwość właściwości index jako wartość ujemną. Elementy niestandardowe nie mogą być umieszczane po lewej stronie logo ani po prawej stronie praw autorskich.

Ten kod tworzy nowy element niestandardowy (nie wyświetla jego konstruktora) 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 elementu sterującego niestandardowego

Poniższa opcja jest prosta (chociaż niezbyt przydatna) i łączy ze sobą wzorce przedstawione powyżej. Ta opcja odpowiada na zdarzenia DOM 'click', wyśrodkowając mapę na określonej lokalizacji domyślnej:

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 przykład

Fragment

Dodawanie stanu do elementów sterujących

Elementy sterujące mogą też przechowywać stan. Poniższy przykład jest podobny do przedstawionego wcześniej, ale ten element sterujący zawiera dodatkowy przycisk „Ustaw dom”, który umożliwia wyświetlanie nowej lokalizacji domu. Aby to zrobić, tworzymy w usłudze home_ właściwość do przechowywania tego stanu i udostępniamy elementy pobierania oraz elementy wprowadzające dla 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;

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

Fragment