Opcje

Wybierz platformę: Android iOS JavaScript

Omówienie ustawień

Mapy wyświetlane za pomocą interfejsu Maps JavaScript API zawierają interfejs użytkownika które umożliwiają użytkownikowi 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.

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. Ten element sterujący jest domyślnie widoczny w prawym dolnym rogu mapy.
  • Sterowanie aparatem obejmuje oba powiększenie i przesuwania. Jest on domyślnie wyświetlany zamiast elementu sterującego powiększeniem podczas korzystania wersji beta.
  • 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órą można przeciągnąć na mapę, aby włączyć Street View. To ustawienie jest domyślnie widoczne w prawym dolnym rogu mapy.
  • Ustawienia obracania umożliwiają połączenie opcji nachylenia i obracania 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. Ta opcja jest domyślnie wyłączona.
  • 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łnego ekranu. Sterowanie trybem pełnoekranowym jest więc niewidoczne na urządzeniach z iOS.
  • Skróty klawiszowe zawierają listę 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 prezentacji elementów sterujących. Możesz dostosować prezentację kontrolną na Utworzenie instancji mapy (przy użyciu 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ślne UI

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. Zobacz dodawanie elementów sterujących do mapy.

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

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

Wyłączanie domyślnego interfejsu

Możesz chcieć 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. 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

Zobacz 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 też o to, aby przyszłe aktualizacje nie zmieniały tego zachowania. 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,
  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 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 Widoczne?
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 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

Zobacz próbkę

Opcje sterowania

Niektóre opcje można konfigurować, aby zmienić ich działanie lub wygląd. Na przykład element sterujący Type map może mieć postać poziomego paska lub menu.

Te ustawienia są zmodyfikowane przez zmianę odpowiednich opcji ustawień. w obiekcie MapOptions po utworzeniu mapy.

Na przykład opcje zmiany ustawienia Typ mapy są podane w mapTypeControlOptions. Element sterujący Typ mapy może się wyświetlać w jednej 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 jeśli zmodyfikujesz opcje sterowania, musisz je też włączyć, ustawiając odpowiednią wartość MapOptions na true. Aby na przykład ustawić kontrolkę Typ mapy na wyświetlanie stylu 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 widoczny 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 dodatkowo określa parametr CameraControlOptions który ma być używany na potrzeby 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 znajduje się w lewym górnym rogu w 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 pozycję na mapie. Pole streetViewControlOptions dodatkowo określa StreetViewControlOptions który ma być używany na potrzeby tego elementu sterującego.
  • 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 bieżącym powiększeniu i przy bieżącej lokalizacji są dostępne zdjęcia o rozdzielczości 45°. Możesz zmienić działanie kontrolki, ustawiając mapę rotateControlOptions, aby określić RotateControlOptions, której chcesz użyć. Nie można wyświetlić elementu sterującego, jeśli nie są dostępne zdjęcia pod kątem 45°.
  • scaleControl włącza/wyłącza ustawienie skali, które zapewnia 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óry ma być używany na potrzeby tego elementu sterującego.
  • fullscreenControl włącza/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 pojawi się element sterujący 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 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. Położenie tych elementów nie jest stałe. 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ż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 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 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 zostać umieszczony w lewym dolnym rogu mapy, ale nad dowolnymi 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 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.

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ą działać zgodnie z logiką określoną w następujących przypadkach: i wyświetlają się jak najbliżej 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ę

Ustawienia 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 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ą. Najogólniej rzecz ujmując, element sterujący to element <div>, który ma pozycję bezwzględną na mapie, wyświetla użytkownikowi interfejs i obsługuje interakcje z użytkownikiem lub mapą, zwykle za pomocą modułu obsługi zdarzeń.

Do utworzenia własnego elementu sterującego potrzeba kilku reguł. Jednak za sprawdzone metody mogą skorzystać następujące wskazówki:

  • Określ odpowiedni CSS dla elementów sterujących, które mają się wyświetlać.
  • 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 przechowywać kontroler, i dodaj 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. 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 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 na zmiany stanu 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 zdarzenia '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 zapewnić, że elementy sterujące będą otrzymywać zdarzenia klawiatury i prawidłowo wyświetlać się w czytnikach ekranu:

  • W przypadku przycisków, elementów formularzy i etykiet 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.

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 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 każdej pozycji według właściwość 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, a wartości o niższym indeksie mają 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.

Poniższy 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 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. Aby to zrobić, tworzymy w elementach home_ właściwość do przechowywania tego stanu oraz metody get i set do jego ustawiania.

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ę