پاپاورها

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

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

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

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

شیء PopoverElementOptions حاوی فیلدهای زیر است:

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

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

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

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

وقتی پاپاور ایجاد می کنید، به طور خودکار روی نقشه نمایش داده نمی شود. برای اینکه 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,
    });
    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,
    });
    // 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 به یک نشانگر متصل کنید

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

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