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

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

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

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

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

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

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

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

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

חשוב: כדי ליהנות מחוויית השימוש הטובה ביותר, צריך לוודא שרק חלון קופץ אחד פתוח במפה בכל רגע נתון. אם יש כמה חלונות קופצים, המפה נראית עמוסה. אם אתם צריכים רק חלון קופץ אחד בכל פעם, אתם יכולים ליצור רק PopoverElementאובייקט אחד ולפתוח אותו במיקומים שונים או בסמנים באירועי מפה, כמו קליקים של משתמשים. אם אתם צריכים יותר מחלון קופץ אחד, אתם יכולים להציג כמה אובייקטים של 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',
        gestureHandling: 'COOPERATIVE',
    });

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

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