پاپاورها

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

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

اضافه کردن یک پاپ‌اوور

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

شیء PopoverElementOptions به صورت تحت‌اللفظی شامل فیلدهای زیر است:

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

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

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

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

یک popover را به مختصات LatLngAltitude متصل کنید

وقتی یک popover ایجاد می‌کنید، به طور خودکار روی نقشه نمایش داده نمی‌شود. برای اینکه popover قابل مشاهده باشد، باید گزینه open را در PopoverElement روی true تنظیم کنید. می‌توانید این عمل را در حین ساخت یا پس از نمونه‌سازی انجام دهید.

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

یک پاپ‌اوور را به یک نشانگر متصل کنید

شما می‌توانید پاپ‌اوورها را به نشانگرها متصل کنید. هنگام اضافه کردن یک پاپ‌اوور متصل به یک نشانگر، گزینه PopoverElement.positionAnchor را برای استفاده از نشانگر تنظیم می‌کنید.

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

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

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

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