דף זה תורגם על ידי Cloud Translation API.

חלון מידע

בחירת פלטפורמה: Android iOS JavaScript

מבוא
הוספת חלון מידע
פתיחת חלון מידע
סגירת חלון מידע
העברת חלון מידע

מבוא

הסמל 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 כדי לאפשר גלילה. חשוב לשים לב שאם לא מפעילים גלילה והתוכן חורג מהשטח הזמין בחלון המידע, התוכן עלול להשתחרר מחלון המידע.

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

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

כשיוצרים חלון מידע, הוא לא מוצג באופן אוטומטי במפה. כדי שחלון המידע יהיה גלוי, צריך להפעיל את השיטה 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

להצגת דוגמה

ניסוי לדוגמה

JSFiddle.net Google Cloud Shell

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

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

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

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

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

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

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

הזזה של חלון מידע

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

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

התאמה אישית

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