- Wprowadzenie
- Dodawanie okna informacyjnego
- Otwórz okno informacyjne
- Zamykanie okna informacyjnego
- Przenoszenie okna informacyjnego
Wprowadzenie
InfoWindow
wyświetla zawartość (zwykle tekst lub obrazy) w
nad mapą w określonym miejscu. Okno informacyjne zawiera treść
i stożkowata łodyga. Końcówka trzonu jest przymocowana do
lokalizację na mapie. Okna informacyjne mają postać okna dla czytników ekranu.
![Okno informacyjne z informacjami o lokalizacji w Australii.](https://developers.google.cn/static/maps/documentation/javascript/images/info-window.png?authuser=9&hl=pl)
Okno informacyjne jest zazwyczaj dołączone do elementu znacznika, ale możesz też dołączyć okno informacyjne do określonej szerokości i długości geograficznej, zgodnie z opisem w dotyczących dodawania okna informacyjnego poniżej.
Ogólnie rzecz biorąc, okna informacyjne to rodzaj nakładki. Informacje na temat: inne typy nakładek, zobacz Rysunek na mapie.
Dodaj okno informacyjne
Konstruktor InfoWindow
pobiera
Literał obiektu
InfoWindowOptions
, który określa początkową wartość
parametry wyświetlania okna informacyjnego.
Literał obiektu InfoWindowOptions
zawiera następujące pola:
content
zawiera ciąg tekstowy lub węzeł DOM. który ma się wyświetlić w oknie informacyjnym.pixelOffset
zawiera przesunięcie od końca informacji przejdź do lokalizacji, na której jest zakotwiczone okno informacyjne. W praktyce nie należy podawać tego pola. Możesz pozostawić wartość domyślną .position
zawiera poleLatLng
, w którym te informacje jest zakotwiczone. Uwaga: dokumentInfoWindow
może być dołączony zarówno do do obiektuMarker
(w tym przypadku jego położenie jest określane na podstawie znacznik) lub na mapie (LatLng
). Jednym ze sposobów uzyskaniaLatLng
jest użycie polecenia Usługa geokodowania. Otwarcie okna informacyjnego na znaczniku spowoduje automatyczne zaktualizowanieposition
maxWidth
określa maksymalną szerokość informacji okno w pikselach. Okno informacyjne domyślnie rozwija się, aby dopasować je do treści, i automatycznie zawija tekst, jeśli okno informacyjne wypełnia mapę. Jeśli dodajmaxWidth
, które zostanie automatycznie zawijane przez okno informacyjne, aby wymusić stosowanie o określonej szerokości. Jeśli osiągnie maksymalną szerokość, więcej miejsca na ekranie, okno informacyjne może rozwinąć się w pionie.
InfoWindow
może zawierać ciąg znaków,
fragment kodu HTML lub element DOM. Aby ustawić treść, możesz ją określić.
w aplikacji InfoWindowOptions
lub wywołaj
setContent()
bezpośrednio w: InfoWindow
.
Jeśli chcesz określić konkretny rozmiar treści, możesz umieścić ją w
<div>
i określ styl elementu <div>
za pomocą:
CSS. Aby włączyć przewijanie, możesz też użyć CSS. Należy pamiętać, że
włącz przewijanie, a jej zawartość przekracza ilość miejsca dostępnego w informacjach
treść może wypłynąć z okna informacyjnego.
Otwórz okno informacyjne
Po utworzeniu okna informacyjnego nie jest ono automatycznie wyświetlane na mapie.
Aby okno informacyjne było widoczne, musisz wywołać metodę open()
na: InfoWindow
, mija InfoWindowOpenOptions
literał obiektu określający te opcje:
map
określa mapę lub panoramę Street View do otwarcia.- Pole
anchor
zawiera punkt zakotwiczenia (np.Marker
). Jeśli opcjaanchor
ma wartośćnull
lub jest niezdefiniowana, informacje okno otworzy się we właściwościposition
.
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;
Zobacz próbkę
Następujący przykład ustawia właściwość maxWidth
okna informacyjnego:
zobacz przykład.
Ustaw zaznaczenie na oknie informacyjnym
Aby ustawić zaznaczenie na oknie informacyjnym, nadaj mu nazwę focus()
.
. Rozważ użycie tej metody razem z visible
przed wybraniem opcji. Wywoływanie tej metody w przypadku niewidocznych informacji
okno przeglądarki nie przyniesie żadnego efektu. Zadzwoń pod numer open()
wyświetlenie okna informacyjnego.
Zamykanie okna informacyjnego
Domyślnie okno informacyjne pozostaje otwarte, dopóki użytkownik nie kliknie przycisku zamykania.
Control (krzyżyk w prawym górnym rogu okna informacyjnego) lub naciśnij klawisz ESC.
Możesz również zamknąć okno informacyjne, wywołując jego close()
.
Po zamknięciu okna informacyjnego zaznaczenie wróci do elementu, który był w
zaznaczenie przed otwarciem okna informacyjnego. Jeśli ten element jest niedostępny,
zaznaczenie zostanie przeniesione z powrotem na mapę. Aby zastąpić to zachowanie, możesz nasłuchiwać
closeclick
i ręcznie zarządzać zaznaczeniem, tak jak to widać na
następujący przykład:
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 informacyjnym lub - Dołącz okno informacyjne do nowego znacznika za pomocą
Metoda
InfoWindow.open()
. Uwaga: jeśli dzwonisz podopen()
bez przekazywania znacznika,InfoWindow
użyje pozycji określonych podczas budowy przez Literał obiektu:InfoWindowOptions
.
Dostosowywanie
Klasa InfoWindow
nie umożliwia dostosowywania. Zamiast tego:
zobacz
dostosowane
przykład wyskakującego okienka
, aby dowiedzieć się, jak stworzyć w pełni dostosowane wyskakujące okienko.