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

Выберите платформу: 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> и стилизовать этот <div> с помощью CSS. Вы также можете использовать CSS для включения прокрутки. Обратите внимание, что если вы не включите прокрутку, и содержимое выйдет за пределы доступного пространства в информационном окне, оно может выйти за пределы этого окна.

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

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

  • map указывает, какую карту или панораму Street View следует открыть.
  • anchor содержит точку привязки (например, Marker ). Если параметр anchor равен null или не определен, информационное окно откроется по его position .

Машинопись 

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

async function initMap(): Promise<void> {
  // Import the needed libraries.
  await google.maps.importLibrary("maps");
  await google.maps.importLibrary("marker");

  // Get the map element and the inner map from it.
  const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
  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 google.maps.InfoWindow({
    headerContent: heading,
    content: content,
    ariaLabel: "Uluru",
    maxWidth: 500, // Set max width (optional).
  });

  // Create the marker.
  const marker = new google.maps.marker.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,
    });
  });
}

initMap();
index.ts

JavaScript 

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary("maps");
    await 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 google.maps.InfoWindow({
        headerContent: heading,
        content: content,
        ariaLabel: "Uluru",
        maxWidth: 500, // Set max width (optional).
    });
    // Create the marker.
    const marker = new google.maps.marker.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,
        });
    });
}
initMap();
index.js
Посмотреть пример

Попробуйте образец

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

Наведите фокус на информационное окно.

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

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

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

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

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

Переместить информационное окно

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

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

Настройка

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