Okna informacyjne

Wybierz platformę: Android iOS JavaScript

Wprowadzenie

InfoWindow wyświetla treści (zwykle tekst lub obrazy) w wyskakującym okienku nad mapą w określonej lokalizacji. Okno informacji ma obszar treści i zwężającą się nóżkę. Koniec ramienia jest przymocowany do określonego miejsca na mapie. Okna informacyjne są odczytywane przez czytniki ekranu jako okna dialogowe.

Zazwyczaj okno informacyjne jest dołączane do markera, ale można je też dołączyć do określonej szerokości i długości geograficznej, jak opisano w sekcji dotyczącej dodawania okna informacyjnego poniżej.

Ogólnie rzecz biorąc, okna informacyjne są rodzajem nakładki. Informacje o innych typach nakładek znajdziesz w artykule Rysowanie 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 tekstowy lub węzeł DOM do wyświetlenia w oknie informacyjnym.
  • pixelOffset zawiera przesunięcie od wierzchołka okna informacyjnego do lokalizacji, w której jest ono zakotwiczone. W praktyce nie musisz określać tego pola. Możesz pozostawić wartość domyślną.
  • position zawiera LatLng, do którego jest przypięte to okno z informacjami. Uwaga: 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 punkcie LatLng. Jednym ze sposobów uzyskania LatLng jest skorzystanie z usługi geokodowania. Otwarcie okna informacji na znaczniku spowoduje automatyczną aktualizację position.
  • maxWidth określa maksymalną szerokość okna informacji w pikselach. Domyślnie okno informacyjne rozszerza się, aby dopasować się do treści, a tekst jest automatycznie zawijany, jeśli okno informacyjne wypełnia mapę. Jeśli dodasz maxWidth, okno informacyjne automatycznie dopasuje się do określonej szerokości. Jeśli osiągnie maksymalną szerokość i na ekranie jest miejsce w pionie, okno informacji może się rozwinąć w pionie.

Zawartość elementu InfoWindow może zawierać ciąg tekstowy, fragment kodu HTML lub element DOM. Aby ustawić treść, podaj ją w parametrze InfoWindowOptions lub wywołaj funkcję setContent() w parametrze InfoWindow.

Jeśli chcesz wyraźnie określić rozmiar treści, możesz umieścić ją w elemencie <div> i nadać mu styl za pomocą CSS.<div> Możesz też włączyć przewijanie za pomocą CSS. Pamiętaj, że jeśli nie włączysz przewijania, a treść przekroczy dostępną przestrzeń w oknie informacji, może wyjść poza to okno.

.

Otwieranie okna informacyjnego

Po utworzeniu okna informacyjnego nie jest ono automatycznie wyświetlane na mapie. Aby okno informacji było widoczne, musisz wywołać metodę open() na obiekcie InfoWindow, przekazując literał obiektu InfoWindowOpenOptions, który określa te opcje:

  • map określa mapę lub panoramę Street View, która ma zostać otwarta.
  • anchor zawiera punkt zakotwiczenia (np. Marker). Jeśli opcja anchor ma wartość null lub jest niezdefiniowana, okno informacji otworzy się w miejscu określonym przez właściwość position.

TypeScript

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

async function initMap(): Promise<void> {
  // Import the needed libraries.
  await google.maps.importLibrary("maps");
  await google.maps.importLibrary("marker");

  // Get the map element and the inner map from it.
  const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
  const innerMap = mapElement.innerMap;

  // Get the center of the map.
  const center = mapElement.center;

  // Create the info window content.
  const heading = document.createElement("h1");
  heading.textContent = "Uluru (Ayers Rock)";

  const content = document.createElement("div");

  const infoParagraph = document.createElement("p");
  infoParagraph.textContent =
  `Uluru, also referred to as Ayers Rock, is a large sandstone rock formation 
  in the southern part of the Northern Territory, central Australia. It lies
  335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km 
  (280 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.`;

  content.appendChild(infoParagraph);

  const link = document.createElement("a");
  link.href = "https://en.wikipedia.org/w/index.php?title=Uluru";
  link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru";
  link.target = "_blank";
  content.appendChild(link);

  // Create the info window.
  const infowindow = new google.maps.InfoWindow({
    headerContent: heading,
    content: content,
    ariaLabel: "Uluru",
    maxWidth: 500, // Set max width (optional).
  });

  // Create the marker.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: center,
    map: innerMap,
    title: "Uluru (Ayers Rock)",
    gmpClickable: true,
  });

  // Open the info window when the map loads.
  infowindow.open({
    anchor: marker,
    map: innerMap,
  });

  // Open the info window when the marker is clicked.
  marker.addEventListener("gmp-click", () => {
    infowindow.open({
      anchor: marker,
      map: innerMap,
    });
  });
}

initMap();
index.ts

JavaScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary("maps");
    await google.maps.importLibrary("marker");
    // Get the map element and the inner map from it.
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;
    // Get the center of the map.
    const center = mapElement.center;
    // Create the info window content.
    const heading = document.createElement("h1");
    heading.textContent = "Uluru (Ayers Rock)";
    const content = document.createElement("div");
    const infoParagraph = document.createElement("p");
    infoParagraph.textContent =
        `Uluru, also referred to as Ayers Rock, is a large sandstone rock formation 
  in the southern part of the Northern Territory, central Australia. It lies
  335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km 
  (280 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.`;
    content.appendChild(infoParagraph);
    const link = document.createElement("a");
    link.href = "https://en.wikipedia.org/w/index.php?title=Uluru";
    link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru";
    link.target = "_blank";
    content.appendChild(link);
    // Create the info window.
    const infowindow = new google.maps.InfoWindow({
        headerContent: heading,
        content: content,
        ariaLabel: "Uluru",
        maxWidth: 500, // Set max width (optional).
    });
    // Create the marker.
    const marker = new google.maps.marker.AdvancedMarkerElement({
        position: center,
        map: innerMap,
        title: "Uluru (Ayers Rock)",
        gmpClickable: true,
    });
    // Open the info window when the map loads.
    infowindow.open({
        anchor: marker,
        map: innerMap,
    });
    // Open the info window when the marker is clicked.
    marker.addEventListener("gmp-click", () => {
        infowindow.open({
            anchor: marker,
            map: innerMap,
        });
    });
}
initMap();
index.js
Zobacz przykład

Wypróbuj przykład

W tym przykładzie ustawiamy maxWidth okna informacyjnego: zobacz przykład.

Ustawianie zaznaczenia na oknie informacyjnym

Aby ustawić fokus na okno informacyjne, wywołaj jego metodę focus(). Rozważ użycie tej metody wraz ze zdarzeniem visible przed ustawieniem fokusu. Wywołanie tej metody w niewidocznym okienku informacyjnym nie będzie miało żadnego efektu. Zadzwoń pod numer open(), aby wyświetlić okno informacyjne.

Zamykanie okna informacyjnego

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

Po zamknięciu okna informacyjnego fokus wraca do elementu, który był zaznaczony przed otwarciem okna. Jeśli ten element jest niedostępny, fokus wraca na mapę. Aby zastąpić to działanie, możesz nasłuchiwać zdarzenia closeclick i ręcznie zarządzać fokusem, jak pokazano w przykładzie poniżej:

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

Przenoszenie okna informacyjnego

Lokalizację okna informacyjnego możesz zmienić na kilka sposobów:

  • Zadzwoń pod numer setPosition() w oknie informacji lub
  • Dołącz okno informacyjne do nowego markera za pomocą metody InfoWindow.open(). Uwaga: jeśli wywołasz funkcję open() bez przekazywania znacznika, funkcja InfoWindow użyje pozycji określonej podczas tworzenia za pomocą literału obiektu InfoWindowOptions.

Dostosowywanie

Klasa InfoWindow nie oferuje możliwości dostosowywania. Zamiast tego zapoznaj się z przykładem dostosowanego wyskakującego okienka, aby dowiedzieć się, jak utworzyć w pełni dostosowane wyskakujące okienko.