חלון מידע

בחירת פלטפורמה: Android iOS JavaScript
  1. מבוא
  2. הוספת חלון מידע
  3. פתיחת חלון מידע
  4. סגירת חלון מידע
  5. העברה של חלון מידע

מבוא

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

חלון מידע שמציג מידע על מיקום באוסטרליה.

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

באופן כללי, חלונות מידע הם סוג של שכבת-על. למידע נוסף על סוגים אחרים של שכבת-על, אפשר לעיין במאמר שרטוט על המפה.

הוספת חלון מידע

הבנאי InfoWindow משתמש בליטרל של אובייקט InfoWindowOptions, שמציין את הפרמטרים הראשוניים להצגת חלון המידע.

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

  • content מכיל מחרוזת טקסט או צומת DOM להצגה בחלון המידע.
  • pixelOffset מכיל הפרש מהקצה הקצה של חלון המידע למיקום שבו חלון המידע מעוגן. בפועל, אין צורך לציין את השדה הזה. אפשר להשאיר אותו עם ערך ברירת המחדל.
  • השדה position מכיל את LatLng שבו חלון המידע הזה מקושר. הערה: ניתן לצרף InfoWindow לאובייקט Marker (במקרה כזה, המיקום שלו מבוסס על מיקום הסמן) או על המפה עצמה ב-LatLng שצוין. אחת מהדרכים לאחזר LatLng היא באמצעות שירות הקידוד הגיאוגרפי. פתיחת חלון מידע על סמן תעדכן אוטומטית את position.
  • maxWidth מציין את הרוחב המקסימלי של חלון המידע בפיקסלים. כברירת מחדל, חלון מידע מתרחב כדי להתאים לתוכן שלו, ועוטף את הטקסט באופן אוטומטי אם חלון המידע ממלא את המפה. אם מוסיפים maxWidth, חלון המידע יגלוש באופן אוטומטי כדי לאכוף את הרוחב שצוין. אם הוא מגיע לרוחב המרבי ויש מקום אנכי במסך, חלון המידע עשוי להתרחב אנכית.

התוכן של InfoWindow עשוי להכיל מחרוזת טקסט, קטע HTML או רכיב DOM. כדי להגדיר את התוכן, צריך לציין אותו בתוך InfoWindowOptions או לקרוא ל-setContent() ב-InfoWindow באופן מפורש.

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

פתיחת חלון מידע

כשיוצרים חלון מידע, הוא לא מוצג באופן אוטומטי במפה. כדי שחלון המידע יהיה גלוי, צריך להפעיל את השיטה open() ב-InfoWindow, להעביר אובייקט InfoWindowOpenOptions שמציין את האפשרויות הבאות:

  • map מציין את המפה או הפנורמה של Street View שבהן יש לפתוח.
  • השדה anchor מכיל נקודת עוגן (לדוגמה, Marker). אם האפשרות anchor היא null או לא מוגדרת, חלון המידע ייפתח במאפיין position שלו.

TypeScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap(): void {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";

  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";
  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
    });
  });
}

window.initMap = initMap;
index.js
להצגת דוגמה

רוצה לנסות דוגמה?

בדוגמה הבאה מוגדר הערך maxWidth של חלון מידע: view example.

הגדרת המיקוד בחלון מידע

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

סגירת חלון מידע

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

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

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

העברה של חלון מידע

יש כמה דרכים לשנות את המיקום של חלון מידע:

  • מתקשרים למספר setPosition() בחלון המידע, או
  • מצמידים את חלון המידע לסמן חדש באמצעות InfoWindow.open(). הערה: אם קוראים ל-open() בלי להעביר סמן, InfoWindow ישתמש במיקום שצוין במהלך הבנייה באמצעות ליטרל האובייקט InfoWindowOptions.

התאמה אישית

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