Opcje

Wybierz platformę: Android iOS JavaScript

Omówienie elementów sterujących

Mapy wyświetlane za pomocą interfejsu Maps JavaScript API zawierają interfejs użytkownika które umożliwiają użytkownikowi interakcję z mapą. Elementy te są nazywane ustawienia. Możesz uwzględnić ich różne odmiany w aplikacji. Możesz też nic nie robić i pozwolić, Maps JavaScript API obsługuje wszystkie elementy sterujące.

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

Poniżej znajduje się lista wszystkich opcji, których możesz używać w swoich mapach:

  • Element sterujący powiększenia wyświetla znak „+” i „-” Przyciski do zmiany poziomu powiększenia mapy. Ta opcja pojawia się domyślnie w w prawym dolnym rogu mapy.
  • Ustawienie typu mapy jest dostępne w menu. lub poziomy paska z przyciskami, co pozwala użytkownikowi wybrać typ mapy (ROADMAP, SATELLITE, HYBRID lub TERRAIN). Ten element sterujący pojawia się domyślnie w lewym górnym rogu w rogu mapy.
  • Element sterujący Street View zawiera ikonę Pegmana który można przeciągnąć na mapę, aby włączyć widok Street View. Ten element sterujący jest domyślnie wyświetlana w prawym dolnym rogu mapy.
  • Element sterujący obrotem zapewnia połączenie tych funkcji: opcji przechylania i obracania w przypadku map zawierających zdjęcia ukośne. Ten element sterujący jest domyślnie widoczny w prawym dolnym rogu mapy. Zobacz 12° zdjęcia.
  • Element sterujący skali wyświetla element skali mapy. Ta opcja jest domyślnie wyłączona.
  • Sterowanie pełnoekranowym umożliwia otwieranie mapę w trybie pełnoekranowym. Ta opcja jest domyślnie włączona na komputerach i urządzeniach mobilnych. Uwaga: iOS nie obsługuje funkcji pełnego ekranu. Sterowanie trybem pełnoekranowym jest więc niewidoczne na urządzeniach z iOS.
  • Sterowanie za pomocą skrótów klawiszowych powoduje wyświetlenie listy skrótów klawiszowych do interakcji z mapą.

Nie masz bezpośredniego dostępu do tych elementów mapy ani nie możesz ich modyfikować. Zamiast tego: zmień pola MapOptions mapy, które wpływają na widoczność i sposobu prezentowania elementów sterujących. Możesz dostosować prezentację kontrolną na Utworzenie instancji mapy (z użyciem odpowiednich MapOptions) lub zmodyfikowanie dynamicznie, wywołując funkcję setOptions(), aby zmienić .

Nie wszystkie z tych ustawień są domyślnie włączone. Aby dowiedzieć się więcej o domyślnym interfejsie użytkownika działania użytkowników (oraz sposobów ich zmodyfikowania), można znaleźć w sekcji Domyślny interfejs poniżej.

Domyślny interfejs

Domyślnie wszystkie elementy sterujące znikają, jeśli mapa jest zbyt mała (200 x 200 pikseli). Możesz zastąpić to zachowanie, ustawiając wartość elementu sterującego jako widoczne. Patrz sekcja Dodawanie elementów sterujących do Mapa.

Działanie i wygląd elementów sterujących są takie same na urządzeniach mobilnych komputerach, z wyjątkiem elementu sterującego pełnym ekranem (zobacz opisane na liście dostępnych elementów sterujących).

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

Wyłączanie domyślnego interfejsu użytkownika

Być może chcesz całkowicie wyłączyć domyślne przyciski interfejsu API. Aby to zrobić: ustaw właściwość disableDefaultUI mapy (w sekcji MapOptions) do true. Ta usługa wyłącza wszystkie przyciski sterujące UI z interfejsu Maps JavaScript API. it nie ma jednak wpływu na gesty myszy ani skróty klawiszowe które są kontrolowane przez gestureHandling oraz keyboardShortcuts.

Ten kod wyłącza przyciski interfejsu:

TypeScript

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

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

Zobacz próbkę

Dodawanie elementów sterujących do mapy

Możesz dostosować swój interfejs, usuwając, dodając lub modyfikując interfejs działania i opcje kontroli oraz upewnij się, że przyszłe aktualizacje tego nie zmienią zachowanie użytkownika. Jeśli chcesz tylko dodać lub zmienić dotychczasowy sposób działania, musisz upewnij się, że element sterujący jest wyraźnie dodany do aplikacji.

Niektóre elementy sterujące domyślnie pojawiają się na mapie, a inne nie chyba że wyraźnie o to poprosisz. dodawania i usuwania opcji w sekcji mapa jest określona w następującym obiekcie MapOptions ustawione na true, by były widoczne lub ustawione jako false, aby je ukryć:

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

Domyślnie wszystkie elementy sterujące znikają, jeśli mapa jest mniejsza niż 200 x 200 pikseli. Możesz zastąpić to zachowanie, ustawiając wartość elementu sterującego jako widoczne. Na przykład w tabeli poniżej pokazujemy, czy element sterujący powiększeniem jest czy nie, zależnie od rozmiaru mapy i ustawień Pole zoomControl:

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

Ten przykład ustawia mapę tak, aby ukryto powiększenie i wyświetl kontrolkę Skala. Pamiętaj, że nie wskazujemy jednoznacznie wyłącz domyślny interfejs użytkownika, więc te modyfikacje uzupełniają domyślny interfejs użytkownika. zachowanie użytkownika.

TypeScript

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

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

Zobacz próbkę

Opcje sterowania

Istnieje możliwość skonfigurowania kilku elementów sterujących, co pozwala na zmianę ich działania lub zmienić swój wygląd. Element sterujący typu mapy dla: może na przykład wyglądać jako poziomy pasek lub menu.

Te ustawienia można zmodyfikować, modyfikując odpowiednie opcje ustawień. w obiekcie MapOptions po utworzeniu mapy.

Na przykład opcje zmiany ustawienia Typ mapy są podane w mapTypeControlOptions. Kontrolka Typ mapy może pojawić się w jedną z tych opcji style:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR wyświetla seria elementów sterujących w postaci przycisków na poziomym pasku, jak widać w Google. Mapy.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU wyświetla element sterujący umożliwiający wybór typu mapy za pomocą menu rozwijanego .
  • google.maps.MapTypeControlStyle.DEFAULT wyświetla działanie domyślne, które zależy od rozmiaru ekranu i może się zmienić w przyszłości. jak i w przypadku różnych wersji interfejsu API.

Pamiętaj, że w przypadku modyfikacji opcji sterowania należy jawnie włączyć elementu sterującego oraz ustaw odpowiednią wartość MapOptions do: true. Na przykład: aby ustawić typ mapy aby pokazać styl DROPDOWN_MENU, użyj następującego kodu w obrębie obiekt MapOptions:

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

Poniższy przykład pokazuje, jak zmienić pozycję domyślną stylu elementów sterujących.

TypeScript

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

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

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

Zobacz próbkę

Elementy sterujące są zwykle konfigurowane podczas tworzenia mapy. Pamiętaj jednak: możesz dynamicznie zmieniać wygląd elementów sterujących przez wywołuje metodę setOptions() za pomocą funkcji Map, i przekazywanie jej nowych opcji sterowania.

Modyfikowanie ustawień

Prezentację elementu sterującego określa się podczas tworzenia mapy poprzez pola w obiekcie MapOptions mapy. Te pola są oznaczone poniżej:

  • zoomControl włącza/wyłącza powiększenie. Domyślnie ten element sterujący jest widoczny i widoczny w prawym dolnym rogu mapy. Pole zoomControlOptions dodatkowo określa ZoomControlOptions, które mają być używane na potrzeby tego elementu sterującego.
  • mapTypeControl włącza/wyłącza ustawienie typu mapy który pozwala użytkownikowi przełączać się między typami map (np. mapą i satelitą). Domyślnie ten element sterujący jest widoczny i znajduje się w lewym górnym rogu w rogu mapy. Pole mapTypeControlOptions dodatkowo określa MapTypeControlOptions do dla tego elementu sterującego.
  • streetViewControl włącza/wyłącza element sterujący Pegmana który pozwala użytkownikowi aktywować panoramę Street View. Domyślnie ten element sterujący jest widoczny i znajduje się w prawym dolnym rogu pozycję na mapie. Pole streetViewControlOptions dodatkowo określa StreetViewControlOptions do dla tego elementu sterującego.
  • rotateControl włącza/wyłącza wygląd Obrót do sterowania orientacją zdjęć pod kątem 45°. Według domyślnie obecność elementu sterującego jest określana na podstawie obecności lub nieobecności zdjęć pod kątem 45° dla danego typu mapy przy obecnym powiększeniu i lokalizacji. Możesz zmienić działanie elementu sterującego, ustawiając mapę rotateControlOptions, aby określić RotateControlOptions. Nie możesz użyć funkcji element sterujący pojawia się, jeśli nie są dostępne zdjęcia pod kątem 45°.
  • scaleControl włącza/wyłącza ustawienie skali, które zapewnia prostą skalę mapy. Domyślnie ten element sterujący jest niewidoczny. Kiedy włączona, będzie zawsze wyświetlana w prawym dolnym rogu mapy. scaleControlOptions dodatkowo określa ScaleControlOptions, które mają być używane na potrzeby tego elementu sterującego.
  • fullscreenControl włącza/wyłącza otwieraną opcję mapę w trybie pełnoekranowym. Domyślnie to ustawienie jest włączone. na komputerach i urządzeniach z Androidem. Po włączeniu pojawi się element sterujący w prawym górnym rogu mapy. fullscreenControlOptions dodatkowo określa FullscreenControlOptions, które mają być używane na potrzeby tego elementu sterującego.

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

Sterowanie pozycjonowaniem

Większość opcji sterujących zawiera właściwość position (typu ControlPosition), która wskazuje, gdzie na mapie umieścić element sterujący. Umiejscowienie tych elementów sterujących nie jest bezwzględne. Zamiast tego: interfejs API inteligentnie ułoży elementy sterujące, istniejących elementów mapy lub innych elementów sterujących, bez ograniczeń (np. rozmiar mapy).

Uwaga: nie można zagwarantować, że elementy sterujące mogą nie nakładać się na skomplikowane układy, chociaż interfejs API i spróbować je uporządkować.

Obsługiwane są te pozycje elementów sterujących:

  • TOP_CENTER oznacza, że element sterujący powinien zostać umieszczony na środku u góry mapy.
  • TOP_LEFT oznacza, że element sterujący powinien być umieszczony wzdłuż w lewym górnym rogu mapy z „pływającymi” elementami podrzędnymi elementu sterującego w stronę środka u góry.
  • TOP_RIGHT oznacza, że element sterujący powinien być umieszczony wzdłuż w prawym górnym rogu mapy z „pływającymi” elementami podrzędnymi elementu sterującego w stronę środka u góry.
  • LEFT_TOP oznacza, że element sterujący powinien być umieszczony wzdłuż w lewym górnym rogu mapy, ale pod wszelkimi elementami TOP_LEFT.
  • RIGHT_TOP oznacza, że element sterujący powinien być umieszczony wzdłuż w prawym górnym rogu mapy, ale pod dowolnym elementem TOP_RIGHT .
  • LEFT_CENTER oznacza, że element sterujący powinien zostać umieszczony po lewej stronie mapy, wyśrodkowany między TOP_LEFT i BOTTOM_LEFT pozycji.
  • RIGHT_CENTER oznacza, że element sterujący powinien zostać umieszczony wzdłuż prawej strony mapy, wyśrodkowany między Pozycje TOP_RIGHT i BOTTOM_RIGHT.
  • LEFT_BOTTOM oznacza, że element sterujący powinien zostać umieszczony w lewym dolnym rogu mapy, ale nad dowolnymi BOTTOM_LEFT .
  • RIGHT_BOTTOM oznacza, że element sterujący powinien zostać umieszczony w prawym dolnym rogu mapy, ale nad dowolnymi BOTTOM_RIGHT .
  • BOTTOM_CENTER oznacza, że element sterujący powinien zostać umieszczony na środku u dołu mapy.
  • BOTTOM_LEFT oznacza, że element sterujący powinien zostać umieszczony w lewym dolnym rogu mapy z wszelkimi podelementami elementu sterującego „pływający” w stronę dolnej części ekranu.
  • BOTTOM_RIGHT oznacza, że element sterujący powinien zostać umieszczony w prawym dolnym rogu mapy z wszelkimi podelementami elementu sterującego „pływający” w stronę dolnej części ekranu.

Pozycje te mogą się pokrywać z położeniem elementów interfejsu których miejsc docelowych nie możesz modyfikować (takich jak prawa autorskie i logo Google). W takich przypadkach elementy sterujące będą działać zgodnie z logiką określoną w następujących przypadkach: i wyświetlają się jak najbliżej pozycji.

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

TypeScript

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

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

Zobacz próbkę

Ustawienia niestandardowe

Oprócz zmiany stylu i pozycji istniejących elementów sterujących interfejsu API mogą tworzyć własne elementy sterujące interakcjami z użytkownikiem. Elementy sterujące są nieruchomymi widżetami unoszącymi się na mapie w pozycji bezwzględnej, jak w przeciwieństwie do nakładek, które przesuwają się razem z mapą bazową. Więcej zasadniczo element sterujący to element <div>, który ma pozycję bezwzględną na mapie, wyświetla interfejs użytkownika oraz obsługuje interakcję z użytkownikiem lub mapą, zazwyczaj przez zdarzenie .

Do utworzenia własnego elementu sterującego potrzeba kilku reguł. Jednak następujące wskazówki mogą być dobrą metodą:

  • Określ odpowiedni kod CSS dla elementów sterujących, które mają być wyświetlane.
  • Interakcja z użytkownikiem lub mapą za pomocą modułów obsługi zdarzeń zmiany usługi mapy lub zdarzenia użytkownika (np. 'click'.
  • Utwórz element <div>, aby zachować kontrolę i dodać ten element do właściwości controls elementu Map.

Poniżej omawiamy każdy z tych problemów.

Rysowanie elementów sterujących niestandardowych

Sposób rysowania elementów sterujących zależy od Ciebie. Zalecamy umieść całą prezentację kontrolną w jednym miejscu. <div>, możesz więc kontrolować takie elementy jak jedną jednostkę. Wykorzystamy ten wzorzec projektowy w poniższych przykładach.

Zaprojektowanie atrakcyjnych elementów sterujących wymaga znajomości CSS i DOM. do jego struktury. Poniższy kod przedstawia funkcję tworzenia przycisku który przesuwa mapę tak, że jest wyśrodkowana na Chicago.

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

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

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

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

  return controlButton;
}

Obsługa zdarzeń pochodzących z ustawień niestandardowych

Aby element sterujący był przydatny, musi faktycznie coś zrobić. Co do kontroli zależy od Ciebie. Element sterujący może reagować na dane wejściowe użytkownika lub może reagować na zmiany stanu elementu Map.

Aby odpowiadać na dane wejściowe użytkownika, używaj zasady addEventListener(), która obsługuje obsługiwane zdarzenia DOM. ten fragment kodu dodaje detektor dla 'click' przeglądarki . Zwróć uwagę, że to zdarzenie jest odbierane z interfejsu DOM, a nie z mapy.

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

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

Udostępnianie ustawień niestandardowych

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

  • W przypadku przycisków, elementów formularzy i etykiet zawsze używaj natywnych elementów HTML. Użyj tylko elementu DIV elementu jako kontenera na natywne elementy sterujące; nigdy nie używaj ponownie elementu DIV jako interaktywnego interfejsu. .
  • Użyj elementu label, atrybutu title lub aria-label w odpowiednich przypadkach, aby podać informacje o elemencie interfejsu.

Pozycjonowanie elementów sterujących niestandardowych

Niestandardowe elementy sterujące są umieszczane na mapie w odpowiednich miejscach położenia w controls obiektu Map usłudze. Ta właściwość zawiera tablicę funkcji google.maps.ControlPosition Do sekcji mapę, dodając Node (zwykle <div>) do odpowiedniego ControlPosition. (Informacje na temat tych patrz: Sterowanie pozycjonowaniem above.)

Każdy element ControlPosition przechowuje MVCArray z elementy sterujące wyświetlane w tym miejscu. W rezultacie po dodaniu elementów sterujących lub usunięty z pozycji, interfejs API odpowiednio zaktualizuje elementy sterujące.

Interfejs API umieszcza elementy sterujące na każdej pozycji według właściwość index; elementy sterujące o niższym indeksie są umieszczane jako pierwsze. Na przykład 2 niestandardowe elementy sterujące na pozycji BOTTOM_RIGHT będą jest układany według tego porządku indeksu, przy czym niższe wartości indeksów pierwszeństwo. Domyślnie wszystkie niestandardowe elementy sterujące są umieszczane po umieszczeniu wszystkich domyślnych ustawieniach interfejsu API. Możesz zastąpić to zachowanie, ustawiając parametr właściwości index elementu sterującego na wartość ujemną. Ustawienia niestandardowe nie może znajdować się po lewej stronie logo ani po prawej stronie prawa autorskie.

Ten kod tworzy nowy niestandardowy element sterujący (jego konstruktor nie jest ) i dodaje go do mapy w pozycji TOP_RIGHT.

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

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

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

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

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

Przykład niestandardowego elementu sterującego

Poniższe ustawienie jest proste (choć niezbyt przydatne) oraz łączy wzory pokazane powyżej. Ten element sterujący reaguje na DOM 'click' zdarzeń z określonym domyślnym wyśrodkowaniem mapy lokalizacja:

TypeScript

let map: google.maps.Map;

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

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

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

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

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

  return controlButton;
}

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

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

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

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

Zobacz próbkę

Dodawanie stanu do elementów sterujących

Elementy sterujące mogą również zapisywać stan. Poniższy przykład jest podobny do tego. wyświetlane wcześniej, ale element sterujący zawiera dodatkową opcję „Ustaw dom” który ustawia opcję wyświetlania nowej lokalizacji domu. Robimy to przez utworzenie właściwość home_ w kontroli do przechowywania tego stanu oraz dla danego stanu funkcji pobierania i seterów.

TypeScript

let map: google.maps.Map;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Zobacz próbkę