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

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אובייקט אחד ולפתוח אותו במיקומים שונים או בסמנים באירועי מפה, כמו קליקים של משתמשים. אם אתם צריכים יותר מ-popover אחד, אתם יכולים להציג כמה אובייקטים של PopoverElement בו-זמנית על ידי הגדרת lightDismissDisabled ל-true.

הצמדת חלון קופץ לקואורדינטה LatLngAltitude

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

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

אפשר גם להצמיד חלוניות קופצות לסמנים בלי לכתוב קוד 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();