سرریزکننده

popover محتوا (معمولاً نوشتار یا تصاویر) را در پنجره گفتگویی بالای نقشه، در مکان معینی نمایش می‌دهد. پنجره بالاپر دارای یک ناحیه محتوا و یک پایه مخروطی است. نوک ساقه به مکان مشخصی در نقشه متصل است. پنجره‌های شناور به‌صورت کادر گفتگویی برای صفحه‌خوان‌ها نمایش داده می‌شوند.

معمولاً یک پاپ‌اور را به یک نشانگر تعاملی متصل می‌کنید، اما می‌توانید یک پاپ‌اور را به یک مختصات LatLngAltitude خاص نیز متصل کنید یا آن را از یک نشانگر جابجا کنید.

افزودن بالاپر

سازنده PopoverElement یک PopoverElementOptions حرفی شیء را می‌گیرد که پارامترهای اولیه را برای نمایش بالاپر مشخص می‌کند.

راستین‌نماد شیء PopoverElementOptions شامل فیلدهای زیر است:

• ‫positionAnchor: موقعیت LatLngAltitude که نشانگر در آن نمایش داده می‌شود. اگر از نشانگر استفاده می‌کنید، از موقعیت نشانگر استفاده خواهد شد.
• altitudeMode: نحوه تفسیر ارتفاع پاپ‌اور.
• lightDismissDisabled: اینکه آیا وقتی کاربر خارج از پنجره بالاپر کلیک می‌کند یا کلید Esc را فشار می‌دهد، پنجره بالاپر باز می‌ماند یا نه. وقتی این گزینه روی true تنظیم شده باشد، چند بالاپَر lightDismissDisabled می‌تواند به‌طور هم‌زمان در نقشه نشان داده شود.
• ‫open: تعیین می‌کند که بالاپر باز باشد یا نه. پیش‌فرض به false.

محتوای PopoverElement ممکن است حاوی رشته‌ای از نوشتار، قطعه‌ای از HTML، یا عنصر DOM باشد. محتوا را با افزودن آن به PopoverElement به‌طور صریح در جایگاه header یا default تنظیم می‌کنید.

اگر می‌خواهید اندازه محتوا را به‌طور صریح تعیین کنید، می‌توانید آن را در عنصر <div> قرار دهید و <div> را با CSS سبک‌بندی کنید. پنجره‌های پاپ‌اور به‌طور پیش‌فرض قابل‌پیمایش هستند و حداکثر ارتفاع ازپیش‌تعریف‌شده‌ای دارند.

مهم: برای داشتن بهترین تجربه کاربری، در هر زمان فقط یک بالاپوش باید در نقشه باز باشد. چندین بالاپَر باعث می‌شود نقشه شلوغ به‌نظر برسد. اگر فقط به یک بالاپَر در هر زمان نیاز دارید، می‌توانید فقط یک شیء PopoverElement ایجاد کنید و آن را در مکان‌ها یا نشانگرهای مختلف در رویدادهای نقشه، مانند کلیک‌های کاربر، باز کنید. اگر به بیش‌از یک بالاپَر نیاز دارید، می‌توانید با تنظیم lightDismissDisabled روی true، چندین PopoverElement شیء را به‌طور هم‌زمان نمایش دهید.

بالاپر را به مختصات 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();
index.js

لنگر کردن بالاپر به نشانگر

می‌توانید بالاپرها را به نشانگرها لنگر کنید. هنگام افزودن بالاپری که به نشانگر لنگر شده است، گزینه 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();
index.js

بااستفاده از HTML، بالاپری را به نشانگر لنگر کنید

همچنین می‌توانید بالاپرهای شناور را بدون نوشتن کد جاوا اسکریپت به نشانگرها متصل کنید، همان‌طور که در زیر نشان داده شده است:

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