Okna informacyjne

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
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ść (zwykle tekst lub obrazy) w wyskakującym okienku nad mapą w danej lokalizacji. Okno informacyjne ma obszar treści i stożek. Końcówka rdzenia jest przymocowana do określonego miejsca na mapie. Okna informacyjne są wyświetlane jako okno dialogowe do odczytu ekranu.

Okno Info z informacjami o lokalizacji w Australii.

Do okna znacznika możesz na przykład dołączyć okno informacyjne, ale można je też przypiąć do określonej szerokości i długości geograficznej, tak jak to opisano tutaj.

Okna informacyjne to jedna z nakładek, Informacje o innych typach nakładek znajdziesz w artykule Rysowanie na mapie.

Dodaj okno informacyjne

Konstruktor InfoWindow używa literału 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.
  • Pozycja pixelOffset zawiera przesunięcie od końca okna informacyjnego do lokalizacji, w której okno jest zakotwiczone. W praktyce nie powinno być ono wymagane. Możesz pozostawić wartość domyślną.
  • position zawiera właściwość LatLng, w której jest zakotwiczone to okno informacyjne. Uwaga: obiekt InfoWindow można dołączyć do obiektu Marker (w takim przypadku jego umiejscowienie określa się na podstawie lokalizacji znacznika) lub na mapie w określonym obiekcie LatLng. Jednym ze sposobów pobierania obiektu LatLng jest użycie usługi geokodowania. Otwarcie okna informacyjnego na znacznikach spowoduje automatyczne zaktualizowanie właściwości position.
  • maxWidth określa maksymalną szerokość okna informacyjnego w pikselach. Domyślnie okno informacyjne rozwija się do zawartości strony i automatycznie zawija tekst, jeśli wypełni ona mapę. Jeśli dodasz właściwość maxWidth, okno informacyjne zostanie automatycznie zapakowane, aby wymusić podaną szerokość. Gdy osiągnie maksymalną szerokość i na ekranie pojawi się przestrzeń w pionie, okno informacyjne może się rozwinąć w pionie.

Zawartość elementu InfoWindow może zawierać ciąg tekstowy, fragment kodu HTML lub element DOM. Aby określić treść, określ ją w polu InfoWindowOptions lub wyraź właściwość setContent() w polu InfoWindow.

Jeśli chcesz wyraźnie określić rozmiar treści, możesz umieścić go w elemencie <div> i wybrać styl <div> w pliku CSS. Aby włączyć przewijanie, możesz też użyć CSS. Pamiętaj, że jeśli nie przewiniesz zawartości, a jej ilość przekracza ilość miejsca dostępnego w oknie informacyjnym, może się ona wysunąć z okna informacyjnego.

.

Otwieranie okna informacyjnego

Gdy utworzysz okno informacyjne, nie pojawi się ono automatycznie na mapie. Aby wyświetlić okno informacyjne, musisz wywołać metodę open() w InfoWindow, przesyłając literał obiektu InfoWindowOpenOptions z tymi opcjami:

  • map określa mapę lub panorama Street View, na której mają się otworzyć.
  • anchor zawiera punkt zakotwiczenia (np. Marker). Jeśli opcja anchor jest ustawiona na null lub jest niezdefiniowana, w jej właściwości position otworzy się okno informacyjne.
  • shouldFocus określa, czy zaznaczenie ma być przenoszone wewnątrz okna informacyjnego, gdy jest otwarte.

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,
  });

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

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

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

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,
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

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

window.initMap = initMap;
Zobacz przykład

Fragment

Ten przykład określa maxWidth okna informacyjnego: wyświetl przykład.

Ustaw fokus na oknie informacyjnym

Aby ustawić fokus na oknie informacyjnym, wywołaj jego metodę focus(). Zanim ustawisz ostrość, zastanów się nad użyciem tej metody wraz ze zdarzeniem visible. Wywoływanie 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 pozostanie otwarte, dopóki użytkownik nie kliknie przycisku zamykania (krzyżyk w prawym górnym rogu okna informacyjnego) lub nie naciśnie klawisza ESC. Możesz też jawnie zamknąć okno informacyjne, wywołując jego metodę close().

Gdy okno informacyjne zostanie zamknięte, zaznaczenie zostanie przywrócone z powrotem do elementu, który był widoczny 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 zarządzać nim ręcznie, jak pokazano w poniższym 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 właściwość open() bez przekazania znacznika, InfoWindow użyje pozycji określonej podczas tworzenia za pomocą dosłownego obiektu InfoWindowOptions.

Dostosowywanie

Klasa InfoWindow nie umożliwia dostosowania. Zamiast tego przeczytaj przykładowy niestandardowy okienka, aby dowiedzieć się, jak utworzyć w pełni dostosowane wyskakujące okienko.