Информационные окна

Выберите платформу: Android iOS JavaScript
  1. Введение
  2. Добавление информационного окна
  3. Открытие информационного окна
  4. Закрытие информационного окна
  5. Перемещение информационного окна

Введение

Объект InfoWindow служит для отображения текстового или графического содержания во всплывающем окне, которое открывается поверх карты в указанном местоположении. Информационное окно состоит из области контента и заостренного указателя. Конец указателя прикреплен к указанному местоположению на карте. Для программ чтения с экрана информационное окно считается диалоговым окном.

Информационное окно со сведениями о местоположении в Австралии.

Информационные окна обычно привязываются к маркерам, но можно размещать их на карте, задавая координаты широты и долготы. Подробная информация об этом приведена в разделе ниже.

В более широком смысле информационные окна являются типом наложения. Подробную информацию о других типах наложений можно найти в разделе Рисование на карте.

Добавление информационного окна

Конструктор InfoWindow принимает литерал объекта InfoWindowOptions, указывающий исходные параметры для отображения информационного окна.

Литерал объекта InfoWindowOptions содержит следующие поля:

  • content – текстовая строка или узел DOM, который отображается в информационном окне при открытии.
  • pixelOffset – величина смещения от указателя информационного окна до точки, к которой прикреплено это окно. Обычно в этом поле можно оставить значение по умолчанию.
  • position – координаты точки LatLng, к которой привязано информационное окно. Обратите внимание на то, что объект InfoWindow можно прикрепить или к объекту Marker, в случае чего его расположение будет зависеть от позиции маркера, или к самой карте в точке LatLng. Одним из способов получения координат LatLng является использование сервиса геокодирования. При открытии информационного окна маркера значение поля position обновляется автоматически.
  • maxWidth определяет максимальную ширину информационного окна в пикселях. По умолчанию информационное окно расширяется так, чтобы полностью вмещать содержимое. Если информационное окно заполняет всю карту, содержащийся в нем текст автоматически подгоняется под размер окна. Если использовать параметр maxWidth, информационное окно автоматически настроит ширину текста и окна под указанное значение. Если при достижении максимальной ширины на экране остается свободное место в высоту, окно может растягиваться по вертикали.

Объект InfoWindow может содержать текстовую строку, фрагмент кода HTML или элемент DOM. Содержимое окна можно указать в параметрах InfoWindowOptions или с помощью явного вызова метода setContent() для объекта InfoWindow.

Если вы хотите явно определить размер содержимого, вы можете поместить его в элемент <div> и применить к этому элементу <div> стиль CSS. Также CSS можно использовать для добавления прокрутки. Если вы не включите режим прокрутки и если размер содержимого превысит доступный размер информационного окна, содержимое может выйти за пределы окна.

Открытие информационного окна

Созданное информационное окно не отображается на карте автоматически. Чтобы оно появилось, нужно вызвать open() для InfoWindow, передав литерал объекта InfoWindowOpenOptions со следующими параметрами:

  • map указывает карту или панораму в Просмотре улиц, где нужно показать окно.
  • anchor содержит точку привязки (например, Marker). Если параметр anchor равен null или не задан, информационное окно откроется в точке, определенной свойством 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&#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

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&#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
Посмотреть пример

Примеры кода

В следующем примере задается значение maxWidth информационного окна: посмотреть пример.

Как переместить фокус на информационное окно

Чтобы переместить фокус на информационное окно, вызовите его метод focus(). Рекомендуем попробовать этот метод вместе с событием visible, прежде чем задавать фокус. Вызов этого метода для информационного окна, которое не отображается на экране, ни на что не влияет. Вызовите open(), чтобы отобразить информационное окно.

Закрытие информационного окна

По умолчанию информационное окно отображается, пока пользователь не закроет его, нажав на крестик в правом верхнем углу или на клавишу Esc. Окно также можно закрыть программно, вызвав метод close().

При закрытии информационного окна фокус возвращается к элементу, на котором он находился раньше. Если этот элемент будет недоступен, фокус снова вернется на карту. Чтобы переопределить это поведение, вы можете прослушивать событие closeclick и вручную управлять фокусом, как показано в следующем примере:

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

Перемещение информационного окна

Существует несколько способов изменить расположение информационного окна.

  • Вызовите метод setPosition().
  • Прикрепите информационное окно к новому маркеру, используя метод InfoWindow.open(). Если вызвать метод open() и не передать ему маркер, объект InfoWindow будет размещен в точке, которая была определена при его создании в литерале InfoWindowOptions.

Настройка

Класс InfoWindow не поддерживает настройку. Вместо этого изучите пример настраиваемого всплывающего окна.