Okna informacyjne

Wybierz platformę: Android iOS JavaScript
  1. Wprowadzenie
  2. Dodawanie okna informacyjnego
  3. Otwieranie okna informacyjnego
  4. Zamykanie okna informacyjnego
  5. Przenoszenie okna informacyjnego

Wstęp

InfoWindow wyświetla treści (zwykle tekst lub obrazy) w wyskakującym okienku nad mapą w określonej lokalizacji. Okno informacyjne ma obszar z treścią i zwężony trzon. Końcówka łodygi jest przyłączona do określonego miejsca na mapie. Okna informacyjne są wyświetlane jako okno dla czytników ekranu.

Okno InfoWindow wyświetlające informacje o lokalizacji w Australii.

Zazwyczaj do znacznika umieszczasz okno informacyjne, ale możesz też dołączyć okno informacyjne do określonej szerokości i długości geograficznej, zgodnie z opisem w sekcji dotyczącej dodawania okna informacyjnego poniżej.

Ogólnie okna informacyjne to rodzaj nakładki. Informacje o innych typach nakładek znajdziesz w artykule o rysowaniu na mapie.

Dodawanie okna informacyjnego

Konstruktor InfoWindow przyjmuje literał obiektu InfoWindowOptions, który określa początkowe parametry wyświetlania okna informacyjnego.

Literał obiektu InfoWindowOptions zawiera te pola:

  • content zawiera ciąg tekstu lub węzeł DOM do wyświetlenia w oknie informacyjnym.
  • pixelOffset zawiera przesunięcie od końca okna informacyjnego do lokalizacji, w której jest zakotwiczone okno informacyjne. W praktyce nie trzeba określać tego pola. Możesz pozostawić wartość domyślną.
  • position zawiera obiekt LatLng, w którym jest zakotwiczone to okno informacyjne. Uwaga: obiekt InfoWindow może być dołączony do obiektu Marker (w takim przypadku jego położenie zależy od lokalizacji znacznika) lub do samej mapy w określonym obiekcie LatLng. Jednym ze sposobów pobrania zasobu LatLng jest użycie usługi Geocoding. Otwarcie okna informacyjnego na znaczniku spowoduje automatyczne zaktualizowanie obiektu position.
  • maxWidth określa maksymalną szerokość okna informacyjnego w pikselach. Domyślnie okno informacyjne rozwija się, aby dopasować się do treści, i automatycznie zawija tekst, jeśli okno informacyjne wypełnia mapę. Jeśli dodasz obiekt maxWidth, okno informacyjne zostanie automatycznie zawijane, aby wymusić podaną szerokość. Jeśli osiągnie maksymalną szerokość, na ekranie będzie wystarczająco dużo miejsca w pionie, okno informacyjne może się rozwinąć w pionie.

Treść elementu InfoWindow może zawierać ciąg tekstu, fragment kodu HTML lub element DOM. Aby ustawić treść, wskaż ją w elemencie InfoWindowOptions lub wyraźnie wywołaj setContent() w InfoWindow.

Jeśli chcesz wyraźnie określić rozmiar treści, możesz umieścić ją w elemencie <div> i określić styl elementu <div> za pomocą CSS. Możesz też użyć CSS, aby umożliwić przewijanie. Pamiętaj, że jeśli nie włączysz przewijania, a treści będą zajmować więcej miejsca niż dostępne w oknie informacyjnym, pamiętaj, że może ona wyjąć się z okna informacyjnego.

Otwieranie okna informacyjnego

Po utworzeniu okna informacyjnego nie jest ono wyświetlane automatycznie na mapie. Aby wyświetlić okno informacyjne, musisz wywołać metodę open() w InfoWindow, przekazując literał obiektu InfoWindowOpenOptions, określając te opcje:

  • map określa mapę lub panoramę Street View, na których ma zostać otwarta treść.
  • anchor zawiera punkt zakotwiczenia (np. Marker). Jeśli opcja anchor ma wartość null lub jest niezdefiniowana, okno informacyjne otworzy się zgodnie z właściwością position.

TypeScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

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

  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";

  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";
  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
    });
  });
}

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

Wypróbuj fragment

Wartość maxWidth okna informacyjnego ustawia się w tym przykładzie: view example.

Ustaw zaznaczenie na oknie informacyjnym

Aby zaznaczyć okno informacyjne, wywołaj jego metodę focus(). Zastanów się nad użyciem tej metody razem ze zdarzeniem visible przed ustawieniem zaznaczenia. Wywołanie tej metody w niewidocznym oknie informacyjnym nie przyniesie żadnego efektu. Wywołaj open(), aby wyświetlić okno informacyjne.

Zamykanie okna informacyjnego

Domyślnie okno informacyjne pozostaje otwarte, dopóki użytkownik nie kliknie elementu sterującego zamykającego (krzyżyk w prawym górnym rogu okna informacyjnego) lub nie naciśnie klawisza ESC. Możesz też zamknąć okno informacyjne bezpośrednio, wywołując jego metodę close().

Gdy okno informacyjne jest zamknięte, zaznaczenie cofa się do elementu, który był aktywny przed otwarciem okna. Jeśli ten element jest niedostępny, zaznaczenie zostaje przeniesione z powrotem na mapę. Aby zastąpić to zachowanie, możesz nasłuchiwać zdarzenia closeclick i ręcznie zarządzać zaznaczeniem, jak pokazano w tym przykładzie:

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

Przenoszenie okna informacyjnego

Położenie okna informacyjnego można zmienić na kilka sposobów:

  • Zadzwoń pod numer setPosition() w oknie informacyjnym lub
  • Dołącz okno informacyjne do nowego znacznika, korzystając z metody InfoWindow.open(). Uwaga: jeśli wywołasz open() bez przekazywania znacznika, InfoWindow użyje pozycji określonej podczas tworzenia w literale obiektu InfoWindowOptions.

Personalizacja

Klasa InfoWindow nie umożliwia dostosowywania. Zamiast tego zapoznaj się z przykładem niestandardowego wyskakującego okienka, aby dowiedzieć się, jak utworzyć w pełni dostosowane wyskakujące okienko.