Okna informacyjne

1. Wprowadzenie
2. Dodawanie okna informacyjnego
3. Otwórz okno informacyjne
4. Zamykanie okna informacyjnego
5. 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 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 pole LatLng, w którym te informacje jest zakotwiczone. Uwaga: dokument InfoWindow może być dołączony zarówno do do obiektu Marker (w tym przypadku jego położenie jest określane na podstawie znacznik) lub na mapie (LatLng). Jednym ze sposobów uzyskania LatLng jest użycie polecenia Usługa geokodowania. Otwarcie okna informacyjnego na znaczniku spowoduje automatyczne zaktualizowanie position
• 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 dodaj maxWidth, 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 opcja anchor ma wartość null lub jest niezdefiniowana, informacje okno otworzy się we właściwości position.

// 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&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;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;
index.ts

// 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&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;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;
index.js

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 pod open() 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.