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

חלון מידע

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

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

מבוא

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

מידע מ-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

דוגמה

לדגום

Stackblitch.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

בדוגמה הבאה מגדירים maxWidth של חלון מידע: לצפייה בדוגמה.

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

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

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

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

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

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

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

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

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

התאמה אישית

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