- 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.
![Okno InfoWindow wyświetlające informacje o lokalizacji w Australii.](https://developers.google.cn/static/maps/documentation/javascript/images/info-window.png?authuser=0&hl=pl)
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.