- Wprowadzenie
- Dodawanie okna informacyjnego
- Otwieranie okna informacyjnego
- Zamykanie okna informacyjnego
- 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
zawieraLatLng
, w którym widać to okno. Uwaga: obiektInfoWindow
można dołączyć do obiektuMarker
(w tym przypadku jego położenie zależy od lokalizacji znacznika) lub do mapy na określonym elemencieLatLng
. Jednym ze sposobów pobierania atrybutuLatLng
jest użycie usługi geokodowania. Otwarcie okna informacyjnego na znacznikach spowoduje automatyczne zaktualizowanie obiektuposition
.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ślianchor
ma wartośćnull
lub jest nieokreślona, w jej poluposition
otworzy się okno informacyjne.
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 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.</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;
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 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.</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;
Fragment
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 obiektuInfoWindowOptions
.
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.