Wyskakujące okienka

popover wyświetla treści (zwykle tekst lub obrazy) w oknie dialogowym nad mapą, w danej lokalizacji. Popover ma obszar treści i zwężający się trzon. Koniec trzonu jest przymocowany do określonej lokalizacji na mapie. Czytniki ekranu odczytują popovery jako okna dialogowe.

Zwykle popover jest dołączany do interaktywnego znacznika, ale można go też dołączyć do konkretnej współrzędnej LatLngAltitude lub przesunąć względem znacznika.

Dodawanie popovera

Konstruktor PopoverElement przyjmuje literał obiektu PopoverElementOptions, który określa początkowe parametry wyświetlania popovera.

Literał obiektu PopoverElementOptions zawiera te pola:

  • positionAnchor: pozycja LatLngAltitude, w której ma się wyświetlać znacznik. Jeśli używasz znacznika, zamiast tego zostanie użyta jego pozycja.
  • altitudeMode: sposób interpretowania wysokości popovera.
  • lightDismissDisabled: czy popover pozostaje otwarty, gdy użytkownik kliknie poza niego lub naciśnie klawisz Esc. Gdy ta opcja jest ustawiona na true, na mapie można jednocześnie wyświetlać kilka popoverów z ustawieniem lightDismissDisabled.
  • open: określa, czy popover ma być otwarty. Domyślna wartość to false.

Treść PopoverElement może zawierać ciąg tekstu, fragment kodu HTML lub element DOM. Treść ustawiasz, dołączając ją do PopoverElement w slocie header lub default.

Jeśli chcesz wyraźnie określić rozmiar treści, możesz umieścić ją w elemencie <div> i nadać mu styl za pomocą CSS.<div> Popovery domyślnie można przewijać i mają one predefiniowaną maksymalną wysokość.

Zakotwiczanie popovera do współrzędnej LatLngAltitude

Po utworzeniu popovera nie jest on automatycznie wyświetlany na mapie. Aby popover był widoczny, musisz ustawić opcję open na true w PopoverElement. Możesz to zrobić podczas tworzenia lub po utworzeniu instancji.

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',
        gestureHandling: 'COOPERATIVE',
    });

    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();

Zakotwiczanie popovera do znacznika

Popovery można zakotwiczać do znaczników. Gdy dodajesz popover zakotwiczony do znacznika, ustawiasz opcję PopoverElement.positionAnchor tak, aby używać znacznika.

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',
        gestureHandling: 'COOPERATIVE',
    });

    // 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();

Zakotwiczanie popovera do znacznika za pomocą HTML

Popovery można też zakotwiczać do znaczników bez pisania kodu JavaScript, jak pokazano poniżej:

<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>

Dodawanie niestandardowej treści do popovera

Do popoverów możesz dodawać niestandardowe treści, ustawiając opcje header i 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();