Elementy sterujące

Wybierz platformę: Android iOS JavaScript

Omówienie ustawień

Mapy wyświetlane za pomocą interfejsu Maps JavaScript API zawierają elementy interfejsu użytkownika, które umożliwiają interakcję z mapą. Te elementy nazywamy kontrolkami i możesz uwzględnić ich różne wersje w swojej aplikacji. Możesz też nie robić nic i pozostawić wszystkie działania kontrolne do interfejsu Maps JavaScript API.

Na poniższej mapie widać domyślny zestaw elementów sterujących wyświetlanych przez interfejs Maps JavaScript API:

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

  • Element sterujący powiększeniem zawiera przyciski „+” i „-” do zmiany poziomu powiększenia mapy. Ten element sterujący jest domyślnie widoczny w prawym dolnym rogu mapy.
  • Element sterujący kamerą zawiera elementy sterujące powiększaniem i przesuwaniem. Domyślnie wyświetla się on zamiast elementu sterującego powiększaniem, gdy korzystasz z kanału beta.
  • Element sterujący Typ mapy jest dostępny w menu lub w układzie poziomym, co pozwala użytkownikowi wybrać typ mapy (ROADMAP, SATELLITE, HYBRID lub TERRAIN). Domyślnie element sterujący pojawia się 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 jest domyślnie widoczne w prawym dolnym rogu mapy.
  • Przesuwanie umożliwia połączenie opcji nachylenia i obrotu w przypadku map zawierających obrazy pochylone. Ten element sterujący jest domyślnie widoczny w prawym dolnym rogu mapy. Więcej informacji znajdziesz w artykule o zapisach w formacie 45°.
  • Element sterujący skalą wyświetla element skali mapy. To ustawienie jest domyślnie wyłączone.
  • Element sterujący trybem pełnoekranowym 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łnoekranowej. Dlatego na urządzeniach z iOS kontrola pełnoekranowa jest niewidoczna.
  • Skróty klawiszowe zawierają listę skrótów klawiszowych do interakcji z mapą.

Nie możesz bezpośrednio uzyskiwać dostępu do tych elementów sterujących mapą ani ich modyfikować. Zamiast tego możesz zmodyfikować 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 mapy (za pomocą odpowiedniej funkcji MapOptions) lub zmodyfikować mapę dynamicznie, wywołując funkcję setOptions(), aby zmienić opcje mapy.

Nie wszystkie te opcje są domyślnie włączone. Aby dowiedzieć się więcej o domyślnym zachowaniu interfejsu użytkownika (oraz o tym, jak je zmodyfikować), przeczytaj sekcję Domyślny interfejs użytkownika poniżej.

Domyślne UI

Domyślnie wszystkie elementy sterujące znikają, jeśli mapa jest zbyt mała (200 x 200 pikseli). Możesz zignorować to zachowanie, jawnie ustawiając kontrolę na widoczną. Zobacz dodawanie elementów sterujących do mapy.

Sposób działania i wygląd elementów sterujących są takie same na urządzeniach mobilnych i komputerach, z wyjątkiem elementu sterującego pełnoekranowego (patrz opis w 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 użytkownika w Maps JavaScript API. Nie wpływa jednak 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;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

window.initMap = initMap;
index.js
Zobacz przykład

Wypróbuj próbkę

Dodawanie elementów sterujących do mapy

Możesz dostosować interfejs, usuwając, dodając lub modyfikując zachowanie lub elementy interfejsu. Zadbaj o to, aby przyszłe aktualizacje nie zmieniały tego zachowania. Jeśli chcesz tylko dodać lub zmodyfikować istniejące działanie, musisz wyraźnie dodać element sterujący do aplikacji.

Niektóre elementy sterujące są domyślnie widoczne na mapie, a inne nie będą widoczne, dopóki ich nie włączysz. Dodawanie i usuwanie elementów sterujących z mapy jest określane w tych polach obiektu MapOptions, które ustawiasz na true, aby były widoczne, lub na 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 działanie, wyraźnie ustawiając kontrolę na widoczną. Na przykład w tabeli poniżej widać, czy element sterujący powiększaniem jest widoczny, czy nie, w zależności od rozmiaru mapy i ustawienia pola zoomControl:

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

W tym przykładzie ustawiamy mapę tak, aby ukryć element sterujący Powiększenie i wyświetlić element sterujący Skala. Pamiętaj, że nie wyłączamy domyślnego interfejsu użytkownika, więc te modyfikacje są dodatkiem do domyślnego zachowania interfejsu.

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

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

Wypróbuj próbkę

Opcje sterowania

Możesz konfigurować działanie i wygląd wielu elementów sterujących. Na przykład element sterujący Type map może mieć postać poziomego paska lub menu.

Te opcje są modyfikowane przez zmianę odpowiednich pól opcji obiektu MapOptions podczas tworzenia mapy.

Na przykład opcje zmiany elementu sterującego Typ mapy są wskazane w polu mapTypeControlOptions. Element sterujący Typ mapy może się wyświetlać w jednej z tych opcji:style

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR wyświetla zestaw elementów sterujących jako przyciski na pasku poziomym, tak jak w Mapach Google.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU wyświetla element sterujący z jednym przyciskiem, który umożliwia wybranie typu mapy za pomocą 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.

Pamiętaj, że jeśli zmodyfikujesz opcje sterowania, musisz je też wyraźnie włączyć, ustawiając odpowiednią wartość MapOptions na true. Aby na przykład ustawić kontrolkę Map Type na styl DROPDOWN_MENU, użyj tego kodu w obiekcie MapOptions:

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

W tym przykładzie pokazujemy, 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;
index.ts

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

Wypróbuj próbkę

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

Modyfikuj elementy sterujące

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

  • zoomControl włącza lub wyłącza kontrolę powiększenia. Domyślnie ten element sterujący jest widoczny i wyświetla się w prawym dolnym rogu mapy. Pole zoomControlOptions dodatkowo określa, ZoomControlOptions jakie ustawienie ma być używane w przypadku tego kontrolera.
  • cameraControl włącza/wyłącza sterowanie kamerą. To ustawienie jest domyślnie widoczne na mapach używających kanału beta. Pole cameraControlOptions określa dodatkowo, które ustawienie CameraControlOptions ma być używane w przypadku tego elementu sterującego.
  • mapTypeControl włącza/wyłącza kontrolę Typ mapy, która umożliwia użytkownikowi przełączanie się między typami map (np. mapą i mapą satelitarną). Domyślnie ten element sterujący jest widoczny i wyświetla się w lewym górnym rogu mapy. Pole mapTypeControlOptions dodatkowo określa wartość MapTypeControlOptions, która ma być używana w przypadku tego ustawienia.
  • streetViewControl włącza/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 znajduje się w prawym dolnym rogu mapy. Pole streetViewControlOptions dodatkowo określa wartość StreetViewControlOptions, która ma być używana w przypadku tego ustawienia.
  • rotateControl włącza lub wyłącza opcję obracania, która służy do kontrolowania orientacji obrazów w zakresie 45°. Domyślnie obecność kontrolki zależy od tego, czy w przypadku danego typu mapy w danej lokalizacji i przy danym powiększeniu są dostępne zdjęcia pod kątem 45°. Możesz zmienić działanie kontrolki, ustawiając mapę rotateControlOptions, aby określić RotateControlOptions, której chcesz użyć. Jeśli nie ma obrazów w kącie 45°, nie możesz wyświetlić tego elementu sterującego.
  • scaleControl włącza/wyłącza kontrolę Skala, która umożliwia zmianę skali mapy. Domyślnie ten element sterujący jest niewidoczny. Gdy jest włączona, zawsze będzie widoczna w prawym dolnym rogu mapy. scaleControlOptions dodatkowo określa ScaleControlOptions, którego należy użyć w przypadku tego elementu sterującego.
  • fullscreenControl włącza/wyłącza element sterujący, który otwiera mapę w trybie pełnoekranowym. Domyślnie ta opcja jest włączona na komputerach i urządzeniach z Androidem. Po włączeniu ten element sterujący pojawi się w prawym górnym rogu mapy. 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 elementów sterujących, które początkowo wyłączysz.

Kontrolowanie pozycjonowania

Większość opcji sterowania zawiera właściwość position (typu ControlPosition), która wskazuje, gdzie na mapie umieścić element sterujący. Położenie tych elementów nie jest stałe. Zamiast tego interfejs API będzie inteligentnie rozmieszczać elementy, układając je wokół istniejących elementów mapy lub innych elementów w ograniczonych ramach (np. rozmiaru mapy).

Uwaga: nie możemy zagwarantować, że elementy sterujące nie będą nakładać się na siebie w przypadku skomplikowanych układów, ale interfejs API będzie próbował je rozmieścić w inteligentny sposób.

Obsługiwane są te pozycje sterowania:

  • TOP_CENTER oznacza, że element sterujący powinien znajdować się na środku górnej części mapy.
  • TOP_LEFT oznacza, że element sterujący powinien znajdować się w lewym górnym rogu mapy, a jego elementy podrzędne powinny „płynąć” w kierunku górnego środka.
  • TOP_RIGHT oznacza, że element sterujący powinien znajdować się w prawym górnym rogu mapy, a jego elementy podrzędne powinny „płynąć” w kierunku górnego środka.
  • LEFT_TOP oznacza, że element sterujący powinien znajdować się w lewym górnym rogu mapy, ale poniżej elementów TOP_LEFT.
  • RIGHT_TOP oznacza, że element sterujący powinien znajdować się w prawym górnym rogu mapy, ale poniżej elementów TOP_RIGHT.
  • LEFT_CENTER oznacza, że element sterujący powinien znajdować się po lewej stronie mapy, na środku między pozycjami TOP_LEFT i BOTTOM_LEFT.
  • RIGHT_CENTER wskazuje, że element sterujący powinien znajdować się po prawej stronie mapy, na środku między pozycjami TOP_RIGHT i BOTTOM_RIGHT.
  • LEFT_BOTTOM oznacza, że element sterujący powinien znajdować się w lewym dolnym rogu mapy, ale nad elementami BOTTOM_LEFT.
  • RIGHT_BOTTOM oznacza, że element sterujący powinien znajdować się w prawym dolnym rogu mapy, ale nad elementami BOTTOM_RIGHT.
  • BOTTOM_CENTER oznacza, że element sterujący powinien znajdować się w środku dołu mapy.
  • BOTTOM_LEFT oznacza, że element sterujący powinien znajdować się w lewym dolnym rogu mapy, a jego elementy podrzędne powinny „płynąć” w kierunku dolnego środka.
  • BOTTOM_RIGHT oznacza, że element sterujący powinien znajdować się w prawym dolnym rogu mapy, a jego elementy podrzędne powinny „płynąć” w kierunku dolnego środka.

Pamiętaj, że te pozycje mogą pokrywać się z pozycjami elementów interfejsu użytkownika, których nie możesz modyfikować (np. praw autorskich i logo Google). W takich przypadkach elementy sterujące będą się przemieszczać zgodnie z logiką określoną dla każdej pozycji i będą wyświetlane jak najbliżej wskazanej pozycji.

Ten przykład pokazuje prostą mapę ze 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 próbkę

Elementy sterujące niestandardowe

Oprócz modyfikowania stylu i pozycji dotychczasowych elementów sterujących interfejsu API możesz tworzyć własne elementy sterujące, aby obsługiwać interakcje z użytkownikiem. Elementy sterujące to nieruchome widżety, które unoszą się nad mapą w pozycji bezwzględnej, w przeciwieństwie do nakładek, które poruszają się wraz z podstawową mapą. Najogólniej rzecz ujmując, element sterujący to element <div>, który ma pozycję bezwzględną na mapie, wyświetla użytkownikowi interfejs użytkownika i zarządza interakcją z użytkownikiem lub mapą, zwykle za pomocą modułu obsługi zdarzeń.

Aby utworzyć własne ustawienie niestandardowe, musisz utworzyć kilka reguł. Warto jednak stosować te sprawdzone metody:

  • Określ odpowiedni CSS dla elementów sterujących, które mają się wyświetlać.
  • Obsługa interakcji z użytkownikiem lub mapą za pomocą detektorów zdarzeń dotyczących zmian właściwości mapy lub zdarzeń użytkownika (np. zdarzeń 'click').
  • Utwórz element <div>, aby przechowywać kontroler, i dodaj ten element do właściwości controls elementu Map.

Poniżej omówiliśmy każdy z tych problemów.

Rysowanie niestandardowych elementów sterujących

To, jak narysujesz kontroler, zależy od Ciebie. Zasadniczo zalecamy umieszczenie wszystkich elementów sterowania w jednym elemencie <div>, aby można było nimi manipulować jako jedną jednostkę. Użyjemy tego wzorca w przykładach pokazanych poniżej.

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

Aby element sterujący był przydatny, musi coś robić. To, co kontroluje ten element, zależy od Ciebie. Element sterujący może reagować na dane wejściowe użytkownika lub zmiany stanu Map.

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

Aby zapewnić, że elementy sterujące będą otrzymywać zdarzenia klawiatury i prawidłowo wyświetlać się w czytnikach ekranu:

  • Do tworzenia przycisków, elementów formularza i etykietek zawsze używaj natywnych elementów HTML. Element DIV należy używać tylko jako kontenera do przechowywania elementów natywnych. Nigdy nie przekształcaj elementu DIV w interaktywny element interfejsu.
  • Aby przekazać informacje o elemencie interfejsu użytkownika, użyj elementu label, atrybutu title lub atrybutu aria-label.

Umieszczenie elementów sterujących

Elementy sterujące niestandardowe są umieszczane na mapie w odpowiednich miejscach w usługi controls obiektu Map. Ta właściwość zawiera tablicę elementów google.maps.ControlPosition. Dodaje się je do mapy, dodając element Node (zazwyczaj <div>) do odpowiedniego elementu ControlPosition. (informacje o tych pozycjach znajdziesz powyżej w sekcji sterowanie pozycjonowaniem).

Każdy element ControlPosition przechowuje MVCArray elementów sterowania wyświetlanych na tej pozycji. W efekcie, gdy dodasz lub usuniesz elementy sterujące z pozycji, interfejs API odpowiednio je zaktualizuje.

Interfejs API umieszcza elementy sterujące na poszczególnych pozycjach według kolejności właściwości index. Elementy sterujące o niższym indeksie są umieszczane jako pierwsze. Na przykład 2 elementy sterujące niestandardowe na pozycji BOTTOM_RIGHT zostaną rozmieszczone zgodnie z kolejnością indeksu, przy czym niższe wartości indeksu mają pierwszeństwo. Domyślnie wszystkie opcje niestandardowe są umieszczane po umieszczeniu wszystkich domyślnych opcji interfejsu API. Możesz zmienić to zachowanie, ustawiając właściwość index kontrolki na wartość ujemną. Elementy sterujące niestandardowe nie mogą znajdować się po lewej stronie logo ani po prawej stronie praw autorskich.

Podany niżej kod tworzy nowy element niestandardowy (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 elementu sterującego niestandardowego

Ten element sterujący jest prosty (choć niezbyt przydatny) i łączy wzorce opisane powyżej. Ten element odpowiada 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 próbkę

Dodawanie stanu do elementów sterujących

Elementy sterujące mogą też przechowywać stan. Ten przykład jest podobny do poprzedniego, ale zawiera dodatkowy przycisk „Ustaw jako dom”, który umożliwia ustawienie nowego miejsca docelowego. Robimy to, tworząc w elementach home_ właściwość przechowującą ten stan i zapewniającą metody get i set 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;
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 próbkę