חלונות מידע

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

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

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

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

הערה: כדאי לקרוא את המדריך לשימוש ב-TypeScript ובמפות Google.

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

הערה: קובץ ה-JavaScript נוצר מהקטע של TypeScript.

להצגת דוגמה

ניסיון של דוגמה

JSFiddle.net Google Cloud Shell

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

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

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

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

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

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

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

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

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

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

התאמה אישית

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