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

Выберите платформу: Android iOS JavaScript

Введение

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

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

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

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

Конструктор 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.

async function init(): Promise<void> {
    // Import the needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    // Get the map element and the inner map from it.
    const mapElement = document.querySelector('gmp-map')!;
    const innerMap = mapElement.innerMap;

    // Get the center of the map.
    const center = mapElement.center;

    // Create the info window content.
    const heading = document.createElement('h1');
    heading.textContent = 'Uluru (Ayers Rock)';

    const content = document.createElement('div');

    const infoParagraph = document.createElement('p');
    infoParagraph.textContent = `Uluru, also referred to as Ayers Rock, 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.`;

    content.appendChild(infoParagraph);

    const link = document.createElement('a');
    link.href = 'https://en.wikipedia.org/w/index.php?title=Uluru';
    link.textContent = 'https://en.wikipedia.org/w/index.php?title=Uluru';
    link.target = '_blank';
    content.appendChild(link);

    // Create the info window.
    const infoWindow = new InfoWindow({
        headerContent: heading,
        content,
        ariaLabel: 'Uluru',
        maxWidth: 500, // Set max width (optional).
    });

    // Create the marker.
    const marker = new AdvancedMarkerElement({
        position: center,
        map: innerMap,
        title: 'Uluru (Ayers Rock)',
        gmpClickable: true,
    });

    // Open the info window when the map loads.
    infoWindow.open({
        anchor: marker,
        map: innerMap,
    });

    // Open the info window when the marker is clicked.
    marker.addEventListener('gmp-click', () => {
        infoWindow.open({
            anchor: marker,
            map: innerMap,
        });
    });
}

void init();

JavaScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

async function init() {
    // Import the needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    // Get the map element and the inner map from it.
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    // Get the center of the map.
    const center = mapElement.center;

    // Create the info window content.
    const heading = document.createElement('h1');
    heading.textContent = 'Uluru (Ayers Rock)';

    const content = document.createElement('div');

    const infoParagraph = document.createElement('p');
    infoParagraph.textContent = `Uluru, also referred to as Ayers Rock, 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.`;

    content.appendChild(infoParagraph);

    const link = document.createElement('a');
    link.href = 'https://en.wikipedia.org/w/index.php?title=Uluru';
    link.textContent = 'https://en.wikipedia.org/w/index.php?title=Uluru';
    link.target = '_blank';
    content.appendChild(link);

    // Create the info window.
    const infoWindow = new InfoWindow({
        headerContent: heading,
        content,
        ariaLabel: 'Uluru',
        maxWidth: 500, // Set max width (optional).
    });

    // Create the marker.
    const marker = new AdvancedMarkerElement({
        position: center,
        map: innerMap,
        title: 'Uluru (Ayers Rock)',
        gmpClickable: true,
    });

    // Open the info window when the map loads.
    infoWindow.open({
        anchor: marker,
        map: innerMap,
    });

    // Open the info window when the marker is clicked.
    marker.addEventListener('gmp-click', () => {
        infoWindow.open({
            anchor: marker,
            map: innerMap,
        });
    });
}

void init();
Посмотреть пример

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

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

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

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

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

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

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

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

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

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