מבוא
InfoWindow
מציג תוכן (בדרך כלל טקסט או תמונות)
חלון קופץ מעל המפה, במיקום נתון. חלון המידע מכיל תוכן
וגבע מחודד. קצה הגזע מחובר
המיקום במפה. חלונות מידע מופיעים כתיבת דו-שיח לקוראי מסך.
![חלון מידע שמציג מידע על מיקום באוסטרליה.](https://google-developers.gonglchuangl.net/static/maps/documentation/javascript/images/info-window.png?authuser=0&hl=he)
בדרך כלל מצרפים חלון מידע לסמן, אבל אפשר גם לצרף חלון מידע לקו אורך/רוחב ספציפי, כפי שמתואר ב בקטע על הוספת חלון מידע בהמשך.
באופן כללי, חלונות מידע הם סוג של שכבת-על. לקבלת מידע על סוגים אחרים של שכבות-על, שרטוט על המפה.
הוספת חלון מידע
ה-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
שלו.
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 km (208 mi) " + "south west of the nearest large town, Alice Springs; 450 km " + "(280 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;
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 km (208 mi) " + "south west of the nearest large town, Alice Springs; 450 km " + "(280 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;
כדאי לנסות דוגמה
הדוגמה הבאה מגדירה את maxWidth
של חלון מידע:
לצפייה בדוגמה
העברת המיקוד לחלון מידע
כדי להעביר את המיקוד לחלון מידע, קוראים לו focus()
. כדאי להשתמש בשיטה הזו יחד עם visible
האירוע לפני הגדרת המיקוד. קריאה לשיטה הזו באמצעות מידע לא גלוי
לחלון לא תהיה כל השפעה. חיוג למספר open()
אל
הגדרת חלון מידע כגלוי.
סגירת חלון מידע
כברירת מחדל, חלון מידע נשאר פתוח עד שהמשתמש לוחץ על הסגירה
Control (צלב בפינה השמאלית העליונה של חלון המידע), או מקיש על ESC.
אפשר גם לסגור את חלון המידע באופן מפורש על ידי קריאה לclose()
שלו
.
כשחלון מידע נסגר, המיקוד חוזר לרכיב שהיה ב-
המיקוד לפני פתיחת חלון המידע. אם הרכיב הזה לא זמין,
המיקוד יועבר חזרה למפה. כדי לשנות את ההתנהגות הזו, אפשר להאזין ל
אירוע closeclick
, וניהול ידני של המיקוד כמו שמוצג
בדוגמה הבאה:
infoWindow.addListener('closeclick', ()=>{ // Handle focus manually. });
העברת חלון מידע
יש שתי דרכים לשנות את המיקום של חלון מידע:
- להתקשר אל
setPosition()
בחלון המידע, או - מצרפים את חלון המידע לסמן חדש באמצעות
אמצעי תשלום אחד (
InfoWindow.open()
). הערה: אם תתקשר למספרopen()
מבלי להעביר סמן,InfoWindow
ישתמש במיקום שצוינו במהלך הבנייה דרך ליטרל של אובייקטInfoWindowOptions
.
התאמה אישית
בכיתה InfoWindow
אין אפשרות להתאמה אישית. במקום זאת,
לראות את
בהתאמה אישית
דוגמה לחלון קופץ
כדי לראות איך ליצור חלון קופץ בהתאמה אישית.