سرریزکننده

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