Всплывающие окна

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

Обычно всплывающее окно прикрепляется к интерактивному маркеру, но его также можно прикрепить к определенной координате LatLngAltitude или сместить относительно маркера.

Как добавить всплывающее окно

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

Объектный литерал PopoverElementOptions содержит следующие поля:

  • positionAnchor – позиция LatLngAltitude, в которой нужно показать маркер. Если используется маркер, вместо этого будет использоваться его положение.
  • altitudeMode: как интерпретируется высота всплывающего окна.
  • lightDismissDisabled – остается ли всплывающее окно открытым, когда пользователь нажимает за его пределами или нажимает клавишу Esc. Если для этого параметра задано значение true, на карте может одновременно показываться несколько всплывающих окон lightDismissDisabled.
  • open – определяет, должно ли быть открыто всплывающее окно. Значение по умолчанию – false.

Объект PopoverElement может содержать текстовую строку, фрагмент кода HTML или элемент DOM. Чтобы задать контент, добавьте его в PopoverElement в слоте header или default.

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

Как привязать всплывающее окно к координатам LatLngAltitude

Созданное всплывающее окно не отображается на карте автоматически. Чтобы всплывающее окно было видно, необходимо задать для параметра open значение true в PopoverElement. Это можно сделать во время создания или после создания экземпляра.

async function init() {
    const { Map3DElement, PopoverElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 },
        range: 4000,
        tilt: 74,
        heading: 38,
        mode: 'HYBRID',
    });

    const popover = new PopoverElement({
        altitudeMode: 'ABSOLUTE',
        open: true,
        positionAnchor: { lat: 37.819852, lng: -122.478549, altitude: 150 },
    });

    popover.append('Golden Gate Bridge');

    map.append(popover);

    document.body.append(map);
}

void init();

Как привязать всплывающее окно к маркеру

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

async function init() {
    const { Map3DElement, Marker3DInteractiveElement, PopoverElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 },
        range: 4000,
        tilt: 74,
        heading: 38,
        mode: 'HYBRID',
    });

    // Popovers can only be added to interactive Markers
    const interactiveMarker = new Marker3DInteractiveElement({
        altitudeMode: 'ABSOLUTE',
        position: { lat: 37.819852, lng: -122.478549, altitude: 100 },
    });

    const popover = new PopoverElement({
        open: false,
        positionAnchor: interactiveMarker,
    });

    popover.append('Golden Gate Bridge');

    interactiveMarker.addEventListener('gmp-click', () => {
        // toggle the marker to the other state (unlee you are clicking on the marker itself when it reopens it)
        popover.open = !popover.open;
    });

    map.append(interactiveMarker);
    map.append(popover);

    document.body.append(map);
}

void init();

Как привязать всплывающее окно к маркеру с помощью HTML

Вы также можете привязать всплывающие окна к маркерам, не используя код JavaScript, как показано ниже.

<gmp-map-3d mode="hybrid" center="37.819852,-122.478549" tilt="75" range="2000" heading="330">
  <gmp-marker-3d-interactive gmp-popover-target="my-popover" position="37.819852,-122.478549,100"></gmp-marker-3d-interactive>
  <gmp-popover id="my-popover">
    Golden Gate Bridge
  </gmp-popover>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDGl0teQ6qwaBEdHazOWIEXd8XGWOZvoaM&v=beta&libraries=maps3d">
</script>

Как добавить собственный контент во всплывающее окно

Вы можете добавить собственный контент во всплывающие окна, задав параметры header и content:

async function init() {
  const {Map3DElement, MapMode, PopoverElement, AltitudeMode} = await google.maps.importLibrary('maps3d');

  const map = new Map3DElement({
    center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
    tilt: 75,
    heading: 330,
    mode: MapMode.SATELLITE,
  });

  const popover = new PopoverElement({
    altitudeMode: AltitudeMode.ABSOLUTE,
    open: true,
    positionAnchor: {lat: 37.819852, lng: -122.478549, altitude: 100},
  });

  const header = document.createElement('div');
  header.style.fontWeight = 'bold';
  header.slot = 'header';
  header.textContent = 'Golden Gate Bridge';
  const content = document.createElement('div');
  content.textContent = 'Iconic orange bridge connecting San Francisco to Marin.';

  popover.append(header);
  popover.append(content);

  document.body.append(map);
  map.append(popover);
}

init();