- Введение
- Добавление информационного окна
- Открытие информационного окна
- Закрытие информационного окна
- Перемещение информационного окна
Введение
Объект InfoWindow
служит для отображения текстового или графического содержания во всплывающем окне, которое открывается поверх карты в указанном местоположении. Информационное окно состоит из области контента и заостренного указателя. Конец указателя прикреплен к указанному местоположению на карте. Для программ чтения с экрана информационное окно считается диалоговым окном.
![Информационное окно со сведениями о местоположении в Австралии.](https://developers.google.cn/static/maps/documentation/javascript/images/info-window.png?authuser=5&hl=ru)
Информационные окна обычно привязываются к маркерам, но можно размещать их на карте, задавая координаты широты и долготы. Подробная информация об этом приведена в разделе ниже.
В более широком смысле информационные окна являются типом наложения. Подробную информацию о других типах наложений можно найти в разделе Рисование на карте.
Добавление информационного окна
Конструктор InfoWindow
принимает литерал объекта
InfoWindowOptions
, указывающий исходные параметры для отображения информационного окна.
Литерал объекта InfoWindowOptions
содержит следующие поля:
content
– текстовая строка или узел DOM, который отображается в информационном окне при открытии.pixelOffset
– величина смещения от указателя информационного окна до точки, к которой прикреплено это окно. Обычно в этом поле можно оставить значение по умолчанию.position
– координаты точкиLatLng
, к которой привязано информационное окно. Обратите внимание на то, что объектInfoWindow
можно прикрепить или к объектуMarker
, в случае чего его расположение будет зависеть от позиции маркера, или к самой карте в точкеLatLng
. Одним из способов получения координатLatLng
является использование сервиса геокодирования. При открытии информационного окна маркера значение поляposition
обновляется автоматически.maxWidth
определяет максимальную ширину информационного окна в пикселях. По умолчанию информационное окно расширяется так, чтобы полностью вмещать содержимое. Если информационное окно заполняет всю карту, содержащийся в нем текст автоматически подгоняется под размер окна. Если использовать параметрmaxWidth
, информационное окно автоматически настроит ширину текста и окна под указанное значение. Если при достижении максимальной ширины на экране остается свободное место в высоту, окно может растягиваться по вертикали.
Объект InfoWindow
может содержать текстовую строку, фрагмент кода HTML или элемент DOM. Содержимое окна можно указать в параметрах InfoWindowOptions
или с помощью явного вызова метода setContent()
для объекта InfoWindow
.
Если вы хотите явно определить размер содержимого, поместите его в элемент <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 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;
Примеры кода
Посмотрите пример, в котором задается значение maxWidth
для информационного окна.
Перемещение фокуса на информационное окно
Чтобы переместить фокус на информационное окно, вызовите его метод focus()
. Рекомендуем попробовать этот метод вместе с событием visible
, прежде чем задавать фокус. Вызов этого метода для информационного окна, которое не отображается на экране, ни на что не влияет. Вызовите open()
, чтобы отобразить информационное окно.
Закрытие информационного окна
По умолчанию информационное окно отображается, пока пользователь не закроет его, нажав на крестик в правом верхнем углу или на клавишу Esc.
Окно также можно закрыть программно, вызвав метод close()
.
При закрытии информационного окна фокус возвращается к элементу, на котором он находился раньше. Если этот элемент будет недоступен, фокус снова вернется на карту. Чтобы переопределить это поведение, вы можете прослушивать событие closeclick
и вручную управлять фокусом, как показано в следующем примере:
infoWindow.addListener('closeclick', ()=>{ // Handle focus manually. });
Перемещение информационного окна
Существует несколько способов изменить расположение информационного окна.
- Вызовите метод
setPosition()
. - Прикрепите информационное окно к новому маркеру, используя метод
InfoWindow.open()
. Если вызвать методopen()
и не передать ему маркер, объектInfoWindow
будет размещен в точке, которая была определена при его создании в литералеInfoWindowOptions
.
Настройка
Класс InfoWindow
не поддерживает настройку. Вместо этого изучите пример настраиваемого всплывающего окна.