חלון מידע

1. מבוא
2. הוספת חלון מידע
3. פתיחת חלון מידע
4. סגירת חלון מידע
5. הזזת חלון מידע

מבוא

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

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

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

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

ה-constructor של 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 שלו.

// 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

// 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 של חלון מידע: לצפייה בדוגמה

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

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

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

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

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

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

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

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

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

התאמה אישית

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