Wyskakujące okienka

popover wyświetla treści (zwykle tekst lub obrazy) w oknie dialogowym nad mapą w danej lokalizacji. Wyskakujące okienko ma obszar treści i zwężającą się nóżkę. Koniec ramienia jest przymocowany do określonej lokalizacji na mapie. Wyskakujące okienka są odczytywane przez czytniki ekranu jako okna dialogowe.

Zazwyczaj przyczepiasz wyskakujące okienko do interaktywnego markera, ale możesz też przyczepić je do określonych LatLngAltitude współrzędnych lub przesunąć względem markera.

Dodawanie wyskakującego okienka

Konstruktor PopoverElement przyjmuje literał obiektu PopoverElementOptions określający początkowe parametry wyświetlania wyskakującego okienka.

Literał obiektu PopoverElementOptions zawiera te pola:

  • positionAnchor: Pozycja LatLngAltitude, w której ma się wyświetlać znacznik. Jeśli używasz markera, zamiast tego zostanie użyta jego pozycja.
  • altitudeMode: sposób interpretacji wysokości wyskakującego okienka.
  • lightDismissDisabled: 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ć jednocześnie wyświetlanych kilka wyskakujących okienek lightDismissDisabled.
  • open: określa, czy wyskakujące okienko ma być otwarte. Domyślna wartość to false.

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

Jeśli chcesz jawnie określić rozmiar treści, możesz umieścić ją w elemencie <div> i nadać mu styl za pomocą CSS.<div> Wyskakujące okienka można domyślnie przewijać i mają one zdefiniowaną maksymalną wysokość.

.

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

Po utworzeniu wyskakującego okienka nie jest ono automatycznie wyświetlane na mapie. Aby wyskakujące 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 { AltitudeMode, Map3DElement, MapMode, 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: MapMode.HYBRID,
    });
    const popover = new PopoverElement({
        altitudeMode: 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);
}
init();
index.js

Przykotwiczanie wyskakującego okienka do znacznika

Możesz przypinać wyskakujące okienka do markerów. Podczas dodawania wyskakującego okienka zakotwiczonego do znacznika ustaw opcję PopoverElement.positionAnchor, aby użyć znacznika.

async function init() {
    const { AltitudeMode, Map3DElement, Marker3DInteractiveElement, MapMode, 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: MapMode.HYBRID,
    });
    // Popovers can only be added to interactive Markers
    const interactiveMarker = new Marker3DInteractiveElement({
        altitudeMode: 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', (event) => {
        // 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);
}
init();
index.js

Zakotwiczanie wyskakującego okienka do znacznika za pomocą kodu HTML

Możesz też przypinać 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ć niestandardową treść 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();