Wyskakujące okienka

popover wyświetla treść (zwykle tekst lub obrazy) w oknie dialogowym nad mapą w danej lokalizacji. Wyskakujące okienko zawiera obszar treści i zwężający się element. Końcówka łodygi jest przymocowana do określonej lokalizacji na mapie. W czytnikach ekranu wyskakujące okienka pojawiają się jako okna dialogowe.

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

Dodawanie wyskakującego okienka

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

Literał obiektu PopoverElementOptions zawiera te pola:

  • positionAnchor: pozycja LatLngAltitude, na której ma być wyświetlany znacznik. Jeśli używasz znacznika, zostanie użyta jego pozycja.
  • altitudeMode: sposób interpretowania wysokości wyskakującego okienka.
  • lightDismissDisabled: określa, czy wyskakujące okienko pozostaje otwarte, gdy użytkownik kliknie poza nim lub naciśnie klawisz Esc. Gdy ta opcja jest ustawiona na true, na mapie może być wyświetlanych jednocześnie wiele wyskakujących okienek lightDismissDisabled.
  • open: określa, czy wyskakujące okienko powinno być otwarte. Domyślna wartość to false.

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

Jeśli chcesz wyraźnie określić rozmiar treści, możesz umieścić je w elemencie <div> i nadać <div> mu styl za pomocą CSS. Domyślnie wyskakujące okienka można przewijać i mają one wstępnie zdefiniowaną maksymalną wysokość.

Zakotwiczanie wyskakującego okienka we współrzędnych LatLngAltitude

Po utworzeniu okienka nie jest ono automatycznie wyświetlane na mapie. Aby okienko było widoczne, musisz ustawić opcję open na true w PopoverElement. Możesz wykonać to działanie 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',
    });

    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 wyskakującego okienka do znacznika

Możesz zakotwiczyć wyskakujące okienka do znaczników. Dodając wyskakujące okienko zakotwiczone do znacznika, ustaw opcję PopoverElement.positionAnchor, aby użyć 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',
    });

    // 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 okienka popover do znacznika za pomocą kodu HTML

Możesz też zakotwiczyć wyskakujące okienka 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 niestandardowych treści do wyskakującego okienka

Możesz dodać niestandardowe treści do wyskakujących okienek, 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();