Okna informacyjne

1. Wprowadzenie
2. Dodawanie okna informacyjnego
3. Otwieranie okna informacyjnego
4. Zamykanie okna informacyjnego
5. Przenoszenie okna informacyjnego

Wprowadzenie

InfoWindow wyświetla treść (zwykle tekst lub obrazy) w wyskakującym okienku nad mapą w danym miejscu. Okno informacyjne ma obszar treści i zwężony pnia. Napiwek jest związany z określoną lokalizacją na mapie. Okna informacyjne są wyświetlane jako okna do odczytywania ekranu.

Zazwyczaj do znacznika dołączasz okno informacyjne, ale możesz też dołączyć okno informacyjne do konkretnej szerokości i długości geograficznej, zgodnie z opisem w sekcji Dodawanie okna informacyjnego w dalszej części tego artykułu.

Ogólnie rzecz biorąc, okna informacyjne to rodzaj nakładek. Informacje o innych typach nakładek znajdziesz w artykule Rysowanie na mapie.

Dodaj okno informacyjne

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 tekstowy lub węzeł DOM, który ma być wyświetlany w oknie informacyjnym.
• pixelOffset zawiera przesunięcie od końcówki okna informacyjnego do miejsca, w którym jest zakotwiczone. W praktyce nie musisz określać tego pola. Możesz pozostawić wartość domyślną.
• position zawiera LatLng, w którym widać to okno. Uwaga: obiekt InfoWindow można dołączyć do obiektu Marker (w tym przypadku jego położenie zależy od lokalizacji znacznika) lub do mapy na określonym elemencie LatLng. Jednym ze sposobów pobierania atrybutu LatLng jest użycie usługi geokodowania. Otwarcie okna informacyjnego na znacznikach spowoduje automatyczne zaktualizowanie obiektu position.
• maxWidth określa maksymalną szerokość okna informacyjnego w pikselach. Domyślnie okno informacyjne rozwija się do zawartości i automatycznie zawija tekst, jeśli okno informacyjne wypełnia mapę. Jeśli dodasz właściwość maxWidth, okno informacyjne zostanie automatycznie zawinięte, aby wymusić podaną szerokość. Jeśli osiągnie maksymalną szerokość, a na ekranie jest miejsce w pionie, okno informacyjne może się rozwinąć w pionie.

Zawartość InfoWindow może zawierać ciąg tekstowy, fragment kodu HTML lub element DOM. Aby ustawić treść, określ ją w obrębie InfoWindowOptions lub jednoznacznie wywołaj właściwość setContent() na InfoWindow.

Jeśli chcesz wyraźnie określić rozmiar treści, umieść ją w elemencie <div> i określ styl <div> za pomocą CSS. Aby włączyć przewijanie, możesz też użyć CSS. Pamiętaj, że jeśli nie włączysz przewijania, a zawartość przekroczy obszar dostępny w oknie informacyjnym, może ona wypaść z okna informacyjnego.

Otwórz okno informacyjne

Gdy utworzysz okno informacyjne, nie wyświetli się ono automatycznie na mapie. Aby okno informacyjne było widoczne, musisz wywołać metodę open() w obiekcie InfoWindow, przesyłając literał obiektu InfoWindowOpenOptions określający te opcje:

• map określa mapę lub panoramę Street View, którą chcesz otworzyć.
• anchor zawiera punkt zakotwiczenia (np. Marker). Jeśli anchor ma wartość null lub jest nieokreślona, w jej polu position otworzy się okno informacyjne.

// 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

// 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

Ten przykład ustawia maxWidth okna informacyjnego: zobacz przykład.

Ustaw ostrość na oknie informacyjnym

Aby ustawić fokus na okno informacyjne, wywołaj jego metodę focus(). Zanim ustawisz fokus, możesz użyć tej metody wraz ze zdarzeniem visible. Wywołanie tej metody w niewidocznym oknie informacyjnym nie przyniesie żadnego efektu. Zadzwoń pod numer open(), aby wyświetlić okno informacyjne.

Zamknij okno informacyjne

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

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

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

Przenoszenie okna informacyjnego

Okno informacyjne 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łujesz właściwość open() bez przekazywania znacznika, InfoWindow użyje pozycji określonej podczas tworzenia za pomocą literału obiektu InfoWindowOptions.

Dostosowywanie

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