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

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

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

בדרך כלל מצמידים את ה-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 { 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

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