Opcje

Wybierz platformę: Android iOS JavaScript

Omówienie elementów sterujących

Mapy wyświetlane za pomocą interfejsu Maps JavaScript API zawierają elementy interfejsu umożliwiające użytkownikowi interakcję z mapą. Elementy te są nazywane elementami sterującymi i możesz dodawać ich różne odmiany w aplikacji. Możesz też nie robić nic i pozwolić, by interfejs Maps JavaScript API obsługiwał wszystkie elementy sterujące.

Ta mapa przedstawia domyślny zestaw ustawień wyświetlany przez interfejs Maps JavaScript API:

Poniżej znajduje się lista pełnego zestawu elementów sterujących, których możesz używać na mapach:

  • Sterowanie powiększeniem wyświetla przyciski „+” i „-” do zmiany poziomu powiększenia mapy. Ten element sterujący pojawia się domyślnie w prawym dolnym rogu mapy.
  • Element sterujący typu mapy jest dostępny w formie menu lub poziomego paska przycisków i pozwala użytkownikowi wybrać typ mapy (ROADMAP, SATELLITE, HYBRID lub TERRAIN). To ustawienie pojawia się domyślnie w lewym górnym rogu mapy.
  • Element sterujący Street View zawiera ikonę Pegmana, którą można przeciągnąć na mapę, aby włączyć Street View. To ustawienie wyświetla się domyślnie w prawym dolnym rogu mapy.
  • Element sterujący obrotem udostępnia kombinację opcji przechylania i obracania w przypadku map zawierających zdjęcia skośne. Ten element sterujący pojawia się domyślnie w prawym dolnym rogu mapy. Więcej informacji znajdziesz w artykule na temat zdjęć 45°.
  • Element sterujący skali wyświetla element skali mapy. Domyślnie to ustawienie jest wyłączone.
  • Element sterujący na pełnym ekranie umożliwia otwarcie mapy w trybie pełnoekranowym. To ustawienie jest domyślnie włączone na komputerach i urządzeniach mobilnych. Uwaga: iOS nie obsługuje funkcji pełnego ekranu. Przycisk pełnego ekranu jest więc niewidoczny na urządzeniach z iOS.
  • W obszarze Sterowanie skrótami klawiszowymi wyświetla się lista skrótów klawiszowych umożliwiających interakcję z mapą.

Nie masz dostępu do tych elementów mapy ani ich nie modyfikujesz. Zamiast tego modyfikuj pola MapOptions mapy, co wpływa na widoczność i sposób prezentacji elementów sterujących. Możesz dostosować prezentację elementu sterującego podczas tworzenia instancji mapy (za pomocą odpowiedniego elementu MapOptions) lub dynamicznie zmodyfikować mapę, wywołując metodę setOptions(), aby zmienić opcje mapy.

Nie wszystkie z nich są domyślnie włączone. Informacje o domyślnym zachowaniu interfejsu użytkownika (i o tym, jak zmienić takie działanie) znajdziesz poniżej w sekcji Domyślny interfejs użytkownika.

Domyślny interfejs użytkownika

Domyślnie wszystkie elementy sterujące znikają, jeśli mapa jest zbyt mała (200 x 200 pikseli). Możesz zastąpić to działanie, ustawiając element sterujący jako widoczny. Zobacz Dodawanie elementów sterujących do mapy.

Sposób działania i wyglądu elementów sterujących jest taki sam na urządzeniach mobilnych i komputerach, z wyjątkiem trybu pełnoekranowego (zobacz listę elementów sterujących).

Oprócz tego obsługa klawiatury jest domyślnie włączona na wszystkich urządzeniach.

Wyłączanie domyślnego interfejsu użytkownika

Możesz całkowicie wyłączyć domyślne przyciski interfejsu API. Aby to zrobić, ustaw właściwość disableDefaultUI mapy (w obiekcie MapOptions) na true. Ta właściwość wyłącza wszystkie przyciski sterujące interfejsu z interfejsu Maps JavaScript API. Nie ma jednak wpływu na gesty myszy ani skróty klawiszowe na mapie podstawowej, które są kontrolowane przez właściwości gestureHandling i keyboardShortcuts.

Ten kod wyłącza przyciski interfejsu użytkownika:

TypeScript

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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 fragment

Dodawanie elementów sterujących do mapy

Możesz dostosować interfejs, usuwając, dodając lub modyfikując działanie i elementy interfejsu, aby zagwarantować, że przyszłe aktualizacje nie zmienią tego działania. Jeśli chcesz tylko dodać lub zmienić istniejące zachowanie, musisz upewnić się, że element sterujący jest bezpośrednio dodany do aplikacji.

Niektóre elementy sterujące są domyślnie wyświetlane na mapie, a inne nie będą wyświetlane, chyba że wyraźnie o nie poprosisz. Dodawanie elementów sterujących do mapy lub ich usuwanie jest określone w polach tych obiektów MapOptions. Ustaw ich wartość true, aby były widoczne, lub wartość false, aby je ukryć:

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

Domyślnie wszystkie elementy sterujące znikają, jeśli mapa jest mniejsza niż 200 x 200 pikseli. Możesz zastąpić to działanie, ustawiając element sterujący jako widoczny. Na przykład ta tabela pokazuje, czy element sterujący powiększeniem jest widoczny w zależności od rozmiaru mapy i ustawień pola zoomControl:

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

Poniższy przykład ustawia na mapie ukrycie elementu sterującego Powiększenie i wyświetlenie elementu sterującego Skalowanie. Pamiętaj, że nie wyłączamy jawnie domyślnego interfejsu użytkownika, więc te zmiany sumują się do domyślnego działania interfejsu użytkownika.

TypeScript

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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 fragment

Opcje sterowania

Istnieje możliwość skonfigurowania kilku elementów sterujących – możesz zmienić ich działanie lub wygląd. Na przykład element sterujący typu mapy może mieć postać poziomego paska lub menu.

Te elementy sterujące są modyfikowane przez zmianę odpowiednich pól opcji sterowania w obiekcie MapOptions po utworzeniu mapy.

Na przykład opcje zmiany ustawienia typu mapy są wskazane w polu mapTypeControlOptions. Element sterujący Typ mapy może pojawić się w jednej z następujących opcji style:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR wyświetla tablicę elementów sterujących w postaci przycisków na poziomym pasku, tak jak w Mapach Google.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU wyświetla jeden przycisk sterowania, który umożliwia wybór typu mapy z menu.
  • google.maps.MapTypeControlStyle.DEFAULT wyświetla domyślne zachowanie, które zależy od rozmiaru ekranu i może się zmienić w kolejnych wersjach API.

Pamiętaj, że jeśli zmienisz opcje sterowania, musisz też bezpośrednio włączyć tę kontrolkę, ustawiając odpowiednią wartość MapOptions na true. Aby na przykład ustawić element sterujący typu mapy w taki sposób, aby wyświetlał styl DROPDOWN_MENU, użyj tego kodu w obiekcie MapOptions:

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

Z przykładu poniżej dowiesz się, jak zmienić domyślne położenie i styl elementów sterujących.

TypeScript

// You can set control options to change the default position or style of many
// of the map controls.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ["roadmap", "terrain"],
      },
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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 fragment

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

Modyfikowanie elementów sterujących

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

  • zoomControl włącza i wyłącza element sterujący Powiększenie. Domyślnie ten element sterujący jest widoczny w prawym dolnym rogu mapy. Pole zoomControlOptions dodatkowo określa element ZoomControlOptions, którego należy użyć w przypadku tego elementu sterującego.
  • mapTypeControl włącza lub wyłącza element sterujący Typ mapy, który pozwala użytkownikowi przełączać się między typami map (np. Mapa i Satelita). Domyślnie ten element sterujący jest widoczny i wyświetla się w lewym górnym rogu mapy. Pole mapTypeControlOptions dodatkowo określa element MapTypeControlOptions, którego ma używać ta opcja.
  • streetViewControl włącza lub wyłącza element sterujący Pegmana, który umożliwia użytkownikom aktywowanie panoramy Street View. Domyślnie ten element sterujący jest widoczny w prawym dolnym rogu mapy. Pole streetViewControlOptions dodatkowo określa element StreetViewControlOptions, którego ma używać ta opcja.
  • rotateControl włącza lub wyłącza wygląd elementu sterującego obracaniem obrazu pod kątem orientacji 45°. Domyślnie obecność elementu sterującego jest określana na podstawie obecności lub braku zdjęć pod kątem 45° dla danego typu mapy przy bieżącym powiększeniu i lokalizacji. Możesz zmienić działanie elementu sterującego, ustawiając właściwość rotateControlOptions mapy w taki sposób, aby określała wartość RotateControlOptions. Jeśli nie są obecnie dostępne żadne zdjęcia sferyczne, nie można wyświetlić elementu sterującego.
  • scaleControl włącza lub wyłącza element sterujący Skalowanie, który zapewnia prostą skalę mapy. Domyślnie ta opcja nie jest widoczna. Po włączeniu tej opcji będzie ona zawsze wyświetlana w prawym dolnym rogu mapy. scaleControlOptions dodatkowo określa element ScaleControlOptions, którego ma używać ta opcja.
  • fullscreenControl włącza lub wyłącza element sterujący, który otwiera mapę w trybie pełnoekranowym. Domyślnie to ustawienie jest włączone na komputerach i urządzeniach z Androidem. Po włączeniu tej opcji element sterujący pojawi się w prawym górnym rogu mapy. fullscreenControlOptions dodatkowo określa element FullscreenControlOptions, którego ma używać ta opcja.

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

Sterowanie pozycjonowaniem

Większość opcji sterujących zawiera właściwość position (typu ControlPosition), która wskazuje, gdzie na mapie należy umieścić element sterujący. Pozycjonowanie tych elementów sterujących nie jest bezwzględne. Zamiast tego interfejs API rozmieści elementy sterujące, kładąc je wokół istniejących elementów mapy lub innych ustawień w ramach określonych ograniczeń (takich jak rozmiar mapy).

Uwaga: nie można zagwarantować, że w skomplikowanych układach elementy sterujące nie będą się pokrywać, chociaż interfejs API będzie starał się je inteligentnie rozmieścić.

Obsługiwane są te pozycje sterujące:

  • TOP_CENTER wskazuje, że element sterujący powinien znajdować się wzdłuż górnej krawędzi mapy.
  • Wartość TOP_LEFT wskazuje, że element sterujący powinien znajdować się wzdłuż lewego górnego rogu mapy, a wszystkie jego podrzędne elementy „ciągną się” w kierunku środkowego u góry.
  • Pole TOP_RIGHT wskazuje, że element sterujący powinien znajdować się wzdłuż prawego górnego rogu mapy, a wszystkie jego podrzędne elementy „ciągną się” w kierunku środkowego u góry.
  • LEFT_TOP wskazuje, że element sterujący powinien znajdować się wzdłuż lewego górnego rogu mapy, ale poniżej elementów TOP_LEFT.
  • RIGHT_TOP wskazuje, że element sterujący powinien znajdować się wzdłuż prawego górnego rogu mapy, ale poniżej elementów TOP_RIGHT.
  • LEFT_CENTER wskazuje, że element sterujący powinien znajdować się wzdłuż lewej strony mapy, w środku między pozycjami TOP_LEFT i BOTTOM_LEFT.
  • RIGHT_CENTER wskazuje, że element sterujący powinien znajdować się po prawej stronie mapy, w środku między pozycjami TOP_RIGHT i BOTTOM_RIGHT.
  • LEFT_BOTTOM wskazuje, że element sterujący powinien znajdować się w lewym dolnym rogu mapy, ale nad elementami BOTTOM_LEFT.
  • RIGHT_BOTTOM wskazuje, że element sterujący powinien znajdować się w prawym dolnym rogu mapy, ale nad elementami BOTTOM_RIGHT.
  • BOTTOM_CENTER wskazuje, że element sterujący powinien znajdować się na środku u dołu mapy.
  • Wartość BOTTOM_LEFT wskazuje, że element sterujący powinien znajdować się w lewym dolnym rogu mapy, a wszystkie jego podrzędne elementy „ciągną się” w kierunku środkowego u dołu mapy.
  • Pole BOTTOM_RIGHT wskazuje, że element sterujący powinien znajdować się w prawym dolnym rogu mapy, a wszystkie jego podrzędne elementy „ciągną się” w kierunku środkowego u dołu mapy.

Pamiętaj, że te pozycje mogą zbiegać się z położeniem elementów interfejsu, których miejsc docelowych nie możesz modyfikować (np. praw autorskich lub logo Google). W takich przypadkach elementy sterujące będą przepływać zgodnie z logiką określoną dla każdej pozycji i wyświetlają się jak najbliżej wskazanej pozycji.

Poniższy przykład to prosta mapa z włączonymi wszystkimi elementami sterującymi w różnych pozycjach.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: -28.643387, lng: 153.612224 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER,
      },
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER,
      },
      scaleControl: true,
      streetViewControl: true,
      streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP,
      },
      fullscreenControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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 fragment

Ustawienia niestandardowe

Oprócz modyfikowania stylu i pozycji istniejących opcji interfejsu API możesz też utworzyć własne elementy sterujące do obsługi interakcji z użytkownikiem. Elementy sterujące to nieruchome widżety pływające po mapie w pozycji bezwzględnej, w przeciwieństwie do nakładek, które przesuwają się razem z mapą bazową. Zasadniczo element sterujący to element <div>, który ma bezwzględne położenie na mapie, wyświetla interfejs użytkownika i obsługuje interakcję z użytkownikiem lub mapą, zwykle za pomocą modułu obsługi zdarzeń.

Do utworzenia własnego niestandardowego elementu sterującego wystarczy tylko kilka reguł. Możesz jednak zastosować się do tych wytycznych:

  • Określ odpowiedni kod CSS dla wyświetlanych elementów sterujących.
  • Obsługa interakcji z użytkownikiem lub mapą za pomocą modułów obsługi zdarzeń w przypadku zmian właściwości map lub zdarzeń użytkownika (np. zdarzeń 'click').
  • Utwórz element <div>, który będzie przechowywać element sterujący, i dodaj ten element do właściwości controls obiektu Map.

Każda z nich została omówiona poniżej.

Niestandardowe elementy sterujące rysunkami

Sposób, w jaki włączysz tę funkcję, zależy od Ciebie. Ogólnie zalecamy umieszczenie całej prezentacji kontrolnej w jednym elemencie <div>, dzięki czemu elementy sterujące będą dostępne w jednej jednostce. Wykorzystamy go w przykładach poniżej.

Projektowanie atrakcyjnych elementów sterujących wymaga pewnej wiedzy z zakresu CSS i struktur DOM. Poniższy kod przedstawia funkcję tworzącą element przycisku, który przesuwa mapę tak, aby wyśrodkować się na Chicago.

function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";

  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

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

Aby element sterujący był przydatny, musi faktycznie coś zrobić. Działanie tej funkcji należy do Ciebie. Element sterujący może reagować na dane wejściowe użytkownika lub na zmiany stanu Map.

Do odpowiadania na dane wejściowe użytkownika używaj polecenia addEventListener(), które obsługuje obsługiwane zdarzenia DOM. Ten fragment kodu dodaje odbiornik zdarzenia 'click' przeglądarki. Pamiętaj, że to zdarzenie jest odbierane z interfejsu DOM, a nie z mapy.

// Setup the click event listener: set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

Dostępność niestandardowych elementów sterujących

Aby elementy sterujące odbierały zdarzenia klawiatury i wyświetlały się poprawnie czytnikom ekranu:

  • Zawsze używaj natywnych elementów HTML na potrzeby przycisków, elementów formularzy i etykiet. Elementu DIV używaj tylko jako kontenera do przechowywania natywnych elementów sterujących. Nie używaj ponownie elementu DIV jako interaktywnego elementu interfejsu.
  • W razie potrzeby użyj elementu label, atrybutu title lub atrybutu aria-label, aby podać informacje o elemencie interfejsu.

Pozycjonowanie elementów sterujących

Niestandardowe elementy sterujące są umieszczane na mapie w odpowiednich miejscach we właściwości controls obiektu Map. Ta właściwość zawiera tablicę elementów google.maps.ControlPosition. Aby dodać do mapy niestandardową kontrolkę, dodaj element Node (zwykle <div>) do odpowiedniego elementu ControlPosition. Informacje na temat tych pozycji znajdziesz w sekcji Kontrola pozycjonowania powyżej.

Każdy element ControlPosition przechowuje MVCArray elementów sterujących wyświetlanych w tej pozycji. W związku z tym, gdy elementy sterujące zostaną dodane lub usunięte, interfejs API odpowiednio zaktualizuje ustawienia.

Interfejs API umieszcza ustawienia na każdej pozycji według kolejności właściwości index. Elementy o niższym indeksie znajdują się na początku. Na przykład 2 niestandardowe elementy sterujące w pozycji BOTTOM_RIGHT zostaną rozmieszczone zgodnie z tą kolejnością indeksów. Pierwszeństwo będą miały niższe wartości indeksu. Domyślnie wszystkie niestandardowe elementy sterujące są umieszczane po wprowadzeniu domyślnych ustawień interfejsu API. Możesz zastąpić to działanie, ustawiając wartość ujemną we właściwości index elementu sterującego. Niestandardowe elementy sterujące nie mogą znajdować się po lewej stronie logo ani po prawej stronie praw autorskich.

Poniższy kod tworzy nowy element sterujący (jego konstruktor nie jest widoczny) i dodaje go do mapy w pozycji TOP_RIGHT.

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

Przykład niestandardowych elementów sterujących

Poniższe ustawienie jest proste (choć nie jest szczególnie przydatne) i łączy wzorce pokazane powyżej. Ten element sterujący reaguje na zdarzenia DOM 'click', wyśrodkowując mapę na określonej domyślnej lokalizacji:

TypeScript

let map: google.maps.Map;

const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener('click', () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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 fragment

Dodawanie stanu do ustawień

Elementy sterujące mogą też przechowywać stan. Poniższy przykład jest podobny do poprzedniego, ale element sterujący zawiera dodatkowy przycisk „Ustaw stronę główną”, który ustawia nowy adres domowy. Aby to zrobić, tworzymy w obrębie kontroli właściwość home_ do przechowywania tego stanu i udostępniania dla niego metod pobierających i ustawionych.

TypeScript

let map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);

    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter()!;

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
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 fragment