- Wprowadzenie
- Dodawanie okna informacyjnego
- Otwieranie okna informacyjnego
- Zamykanie okna informacyjnego
- Przenoszenie okna informacyjnego
Wstęp
InfoWindow
wyświetla treści (zwykle tekst lub obrazy) w wyskakującym okienku nad mapą w określonej lokalizacji. Okno informacyjne ma obszar z treścią i zwężony trzon. Końcówka łodygi jest przyłączona do określonego miejsca na mapie. Okna informacyjne są wyświetlane jako okno dla czytników ekranu.

Zazwyczaj do znacznika umieszczasz okno informacyjne, ale możesz też dołączyć okno informacyjne do określonej szerokości i długości geograficznej, zgodnie z opisem w sekcji dotyczącej dodawania okna informacyjnego poniżej.
Ogólnie okna informacyjne to rodzaj nakładki. Informacje o innych typach nakładek znajdziesz w artykule o rysowaniu 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 tekstu 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 zakotwiczone okno informacyjne. W praktyce nie trzeba określać tego pola. Możesz pozostawić wartość domyślną.position
zawiera obiektLatLng
, w którym jest zakotwiczone to okno informacyjne. Uwaga: obiektInfoWindow
może być dołączony do obiektuMarker
(w takim przypadku jego położenie zależy od lokalizacji znacznika) lub do samej mapy w określonym obiekcieLatLng
. Jednym ze sposobów pobrania zasobuLatLng
jest użycie usługi Geocoding. Otwarcie okna informacyjnego na znaczniku spowoduje automatyczne zaktualizowanie obiektuposition
.maxWidth
określa maksymalną szerokość okna informacyjnego w pikselach. Domyślnie okno informacyjne rozwija się, aby dopasować się do treści, i automatycznie zawija tekst, jeśli okno informacyjne wypełnia mapę. Jeśli dodasz obiektmaxWidth
, okno informacyjne zostanie automatycznie zawijane, aby wymusić podaną szerokość. Jeśli osiągnie maksymalną szerokość, na ekranie będzie wystarczająco dużo miejsca w pionie, okno informacyjne może się rozwinąć w pionie.
Treść elementu InfoWindow
może zawierać ciąg tekstu, fragment kodu HTML lub element DOM. Aby ustawić treść, wskaż ją w elemencie InfoWindowOptions
lub wyraźnie wywołaj setContent()
w InfoWindow
.
Jeśli chcesz wyraźnie określić rozmiar treści, możesz umieścić ją w elemencie <div>
i określić styl elementu <div>
za pomocą CSS. Możesz też użyć CSS, aby umożliwić przewijanie. Pamiętaj, że jeśli nie włączysz przewijania, a treści będą zajmować więcej miejsca niż dostępne w oknie informacyjnym, pamiętaj, że może ona wyjąć się z okna informacyjnego.
Otwieranie okna informacyjnego
Po utworzeniu okna informacyjnego nie jest ono wyświetlane automatycznie na mapie.
Aby wyświetlić okno informacyjne, musisz wywołać metodę open()
w InfoWindow
, przekazując literał obiektu InfoWindowOpenOptions
, określając te opcje:
map
określa mapę lub panoramę Street View, na których ma zostać otwarta treść.anchor
zawiera punkt zakotwiczenia (np.Marker
). Jeśli opcjaanchor
ma wartośćnull
lub jest niezdefiniowana, okno informacyjne otworzy się zgodnie z 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. 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;
Wypróbuj fragment
Wartość maxWidth
okna informacyjnego ustawia się w tym przykładzie: view example.
Ustaw zaznaczenie na oknie informacyjnym
Aby zaznaczyć okno informacyjne, wywołaj jego metodę focus()
. Zastanów się nad użyciem tej metody razem ze zdarzeniem visible
przed ustawieniem zaznaczenia. Wywołanie tej metody w niewidocznym oknie informacyjnym nie przyniesie żadnego efektu. Wywołaj open()
, aby wyświetlić okno informacyjne.
Zamykanie okna informacyjnego
Domyślnie okno informacyjne pozostaje otwarte, dopóki użytkownik nie kliknie elementu sterującego zamykającego (krzyżyk w prawym górnym rogu okna informacyjnego) lub nie naciśnie klawisza ESC.
Możesz też zamknąć okno informacyjne bezpośrednio, wywołując jego metodę close()
.
Gdy okno informacyjne jest zamknięte, zaznaczenie cofa się do elementu, który był aktywny przed otwarciem okna. Jeśli ten element jest niedostępny, zaznaczenie zostaje przeniesione z powrotem na mapę. Aby zastąpić to zachowanie, możesz nasłuchiwać zdarzenia closeclick
i ręcznie zarządzać zaznaczeniem, jak pokazano w tym 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łaszopen()
bez przekazywania znacznika,InfoWindow
użyje pozycji określonej podczas tworzenia w literale obiektuInfoWindowOptions
.
Personalizacja
Klasa InfoWindow
nie umożliwia dostosowywania. Zamiast tego zapoznaj się z przykładem niestandardowego wyskakującego okienka, aby dowiedzieć się, jak utworzyć w pełni dostosowane wyskakujące okienko.