חלונות מידע

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

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

דוגמאות קוד

המאגר ApiDemos ב-GitHub כולל דוגמה שמציגה את כל התכונות של חלון המידע:

• ‫MarkerDemoActivity – Java: התאמה אישית של חלונות מידע ושימוש במאזינים של חלונות מידע
• ‫MarkerDemoActivity – Kotlin: התאמה אישית של חלונות מידע ושימוש במאזינים לחלונות מידע

מבוא

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

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

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

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

Kotlin

val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400")
)

      

Java

final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400"));

      

הצגה או הסתרה של חלון מידע

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

Kotlin

val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
)
melbourne?.showInfoWindow()
if (melbourne?.isInfoWindowShown == true) {
    melbourne.hideInfoWindow()
}

      

Java

final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne"));
melbourne.showInfoWindow();
if (melbourne.isInfoWindowShown()) {
    melbourne.hideInfoWindow();
}

      

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

חלונות מידע בהתאמה אישית

אתם יכולים גם להתאים אישית את התוכן והעיצוב של חלונות המידע. כדי לעשות את זה, צריך ליצור הטמעה קונקרטית של הממשק InfoWindowAdapter ואז להפעיל את GoogleMap.setInfoWindowAdapter() עם ההטמעה. הממשק מכיל שתי שיטות להטמעה: getInfoWindow(Marker) ו-getInfoContents(Marker). ה-API יתקשר קודם אל getInfoWindow(Marker), ואם יוחזר הערך null, הוא יתקשר אל getInfoContents(Marker). אם גם הפונקציה הזו מחזירה את הערך null, המערכת תשתמש בחלון המידע שמוגדר כברירת מחדל.

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

הערה: חלון המידע שמוצג לא מתעדכן בזמן אמת. התצוגה מוצגת כתמונה (באמצעות View.draw(Canvas)) בזמן שהיא מוחזרת. המשמעות היא ששינויים נוספים בתצוגה לא ישתקפו בחלון המידע במפה. כדי לעדכן את חלון המידע מאוחר יותר (לדוגמה, אחרי שתמונה נטענה), צריך להפעיל את showInfoWindow(). בנוסף, חלון המידע לא יגיב לאינטראקציות שמתאימות לתצוגה רגילה, כמו אירועי מגע או תנועה. אבל אפשר להאזין לאירוע מסוג קליק כללי על כל חלון המידע, כמו שמתואר בקטע הבא.

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

אירועים בחלון המידע

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

אפשר להשתמש ב-OnInfoWindowClickListener כדי להאזין לאירועי קליקים בחלון מידע. כדי להגדיר את המאזין הזה במפה, מפעילים את GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). כשמשתמש לוחץ על חלון מידע, מתבצעת קריאה ל-onInfoWindowClick(Marker) וחלון המידע מודגש בצבע ברירת המחדל להדגשה (אפור).

Kotlin

map.setOnInfoWindowClickListener { marker ->
    Toast.makeText(
        context, "Info window clicked",
        Toast.LENGTH_SHORT
    ).show()
}

      

Java

map.setOnInfoWindowClickListener(new GoogleMap.OnInfoWindowClickListener() {
    @Override
    public void onInfoWindowClick(Marker marker) {
        Toast.makeText(context, "Info window clicked",
            Toast.LENGTH_SHORT).show();
    }
});

      

באופן דומה, אפשר להאזין לאירועים של קליקים ארוכים באמצעות OnInfoWindowLongClickListener, שאפשר להגדיר על ידי קריאה ל-GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). ה-listener הזה פועל באופן דומה ל-רכיב click listener, והוא יקבל התראה על אירועים מסוג לחיצה ארוכה באמצעות קריאה חוזרת (callback) של onInfoWindowClose(Marker).

כדי לקבל התראה כשחלון המידע נסגר, משתמשים ב-OnInfoWindowCloseListener, שאפשר להגדיר אותו על ידי קריאה ל-GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). תקבלו שיחה חוזרת מ-onInfoWindowClose(Marker).

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

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