חלונות קופצים

popover מציג תוכן (בדרך כלל טקסט או תמונות) בחלון דו-שיח מעל המפה, במיקום מסוים. החלון הקופץ כולל אזור תוכן וקצה מחודד. קצה הרגל מחובר למיקום מסוים במפה. חלונות קופצים מופיעים כתיבת דו-שיח בקוראי מסך.

בדרך כלל מצרפים חלון קופץ לסמן אינטראקטיבי, אבל אפשר גם לצרף חלון קופץ לקואורדינטה ספציפית של LatLngAltitude או להזיז אותו מסמן.

הוספת חלון קופץ

ה-constructor של PopoverElement מקבל ליטרל של אובייקט PopoverElementOptions, שמציין את הפרמטרים הראשוניים להצגת החלונית הקופצת.

הליטרל של האובייקט PopoverElementOptions מכיל את השדות הבאים:

• ‫positionAnchor: המיקום של LatLngAltitude שבו יוצג הסמן. אם משתמשים בסמן, המערכת תשתמש במיקום של הסמן.
• ‫altitudeMode: איך מתבצעת הפרשנות של הגובה של חלון הקופץ.
• ‫lightDismissDisabled: אם החלון הקופץ נשאר פתוח כשהמשתמש לוחץ מחוץ לו או לוחץ על המקש Esc. אם האפשרות הזו מוגדרת לערך true, אפשר להציג כמה חלונות קופצים של lightDismissDisabled במפה בו-זמנית.
• ‫open: קובע אם התפריט הנפתח צריך להיות פתוח או לא. ברירת המחדל היא false.

התוכן של PopoverElement יכול להכיל מחרוזת טקסט, קטע קוד HTML או רכיב DOM. אתם מגדירים את התוכן על ידי הוספה שלו ל-PopoverElement באופן מפורש במשבצת header או default.

אם רוצים להגדיר במפורש את גודל התוכן, אפשר להכניס אותו לרכיב <div> ולעצב את ה-<div> באמצעות CSS. כברירת מחדל, אפשר לגלול בחלונות קופצים, ויש להם גובה מקסימלי מוגדר מראש.

חשוב: כדי לספק את חוויית המשתמש הטובה ביותר, רק חלונית קופצת אחת צריכה להיות פתוחה במפה בכל זמן נתון. כמה חלונות קופצים גורמים למפה להיראות עמוסה. אם אתם צריכים רק חלון קופץ אחד בכל פעם, אתם יכולים ליצור אובייקט PopoverElement אחד ולפתוח אותו במיקומים או בסמנים שונים באירועים במפה, כמו קליקים של משתמשים. אם אתם צריכים יותר מ-popover אחד, אתם יכולים להציג כמה אובייקטים של PopoverElement בו-זמנית על ידי הגדרת lightDismissDisabled ל-true.

הצמדת חלון קופץ לקואורדינטת 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

אפשר גם לעגן חלונות קופצים לסמנים בלי לכתוב קוד JavaScript, כמו בדוגמה הבאה:

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