Okna informacyjne

Wybierz platformę: Android iOS JavaScript

Wprowadzenie

An InfoWindow wyświetla treści (zwykle tekst lub obrazy) w wyskakującym okienku nad mapą w danej lokalizacji. Okno informacyjne ma obszar treści i zwężający się trzon. Koniec trzonu jest przymocowany do określonej lokalizacji na mapie. Czytniki ekranu odczytują okna informacyjne jako okna dialogowe.

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

Ogólnie rzecz biorąc, okna informacyjne są rodzajem nakładki. Więcej informacji o innych typach nakładek znajdziesz w artykule Rysowanie na mapie.

Dodawanie okna informacyjnego

Konstruktor InfoWindow przyjmuje InfoWindowOptions literał obiektu, 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 końca 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, w którym jest zakotwiczone to okno informacyjne. Uwaga: InfoWindow można dołączyć do obiektu Marker (w takim przypadku jego pozycja jest oparta na lokalizacji znacznika) lub do samej mapy w określonym LatLng. Jednym ze sposobów pobrania LatLng jest użycie usługi geokodowania. Otwarcie okna informacyjnego na znaczniku spowoduje automatyczne zaktualizowanie position.
  • maxWidth określa maksymalną szerokość okna informacyjnego w pikselach. Domyślnie okno informacyjne rozszerza się, aby dopasować się do treści, i automatycznie zawija tekst, jeśli okno informacyjne wypełnia mapę. Jeśli dodasz maxWidth, okno informacyjne będzie automatycznie zawijać tekst, aby wymusić określoną szerokość. Jeśli osiągnie maksymalną szerokość i na ekranie będzie miejsce w pionie, okno informacyjne może się rozszerzyć w pionie.

Treść InfoWindow może zawierać ciąg tekstowy, a fragment kodu HTML lub element DOM. Aby ustawić treść, określ ją w InfoWindowOptions lub wywołaj setContent() w InfoWindow jawnie.

Jeśli chcesz jawnie określić rozmiar treści, możesz umieścić ją w elemencie <div> i zastosować do niego <div> style CSS. Za pomocą CSS możesz też włączyć przewijanie. Pamiętaj, że jeśli nie włączysz przewijania, a treść przekroczy dostępną w oknie informacyjnym przestrzeń, może ona wyjść poza okno informacyjne.

Otwieranie okna informacyjnego

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

  • map określa mapę lub panoramę Street View, na której ma się otworzyć okno.
  • anchor zawiera punkt zakotwiczenia (np. Marker). Jeśli opcja anchor ma wartość null lub jest niezdefiniowana, okno informacyjne otworzy się w swojej 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.

async function init(): Promise<void> {
    // Import the needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        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 InfoWindow({
        headerContent: heading,
        content,
        ariaLabel: 'Uluru',
        maxWidth: 500, // Set max width (optional).
    });

    // Create the marker.
    const marker = new 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,
        });
    });
}

void init();

JavaScript

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

async function init() {
    // Import the needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        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 InfoWindow({
        headerContent: heading,
        content,
        ariaLabel: 'Uluru',
        maxWidth: 500, // Set max width (optional).
    });

    // Create the marker.
    const marker = new 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,
        });
    });
}

void init();
Zobacz przykład

Ten przykład pokazuje, jak ustawić maxWidth okna informacyjnego: zobacz przykład.

Ustawianie fokusu na oknie informacyjnym

Aby ustawić fokus na oknie informacyjnym, wywołaj jego focus() metodę. Przed ustawieniem fokusu rozważ użycie tej metody wraz ze zdarzeniem visible. Wywołanie tej metody w niewidocznym oknie informacyjnym nie przyniesie żadnego efektu. Aby okno informacyjne było widoczne, wywołaj open() to.

Zamykanie okna informacyjnego

Domyślnie okno informacyjne pozostaje otwarte, dopóki użytkownik nie kliknie elementu sterującego zamykaniem (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 close() metodę.

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

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

Przesuwanie okna informacyjnego

Istnieje kilka sposobów zmiany lokalizacji okna informacyjnego:

  • Wywołaj setPosition() w oknie informacyjnym lub
  • Dołącz okno informacyjne do nowego znacznika za pomocą metody InfoWindow.open(). Uwaga: jeśli wywołasz open() bez przekazywania znacznika, InfoWindow użyje pozycji określonej podczas tworzenia za pomocą InfoWindowOptions literału obiektu.