חלונות מידע

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

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

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

התוכן של חלון המידע מוגדר על ידי המאפיינים title ו-snippet של הסמן. לחיצה על הסמן לא תציג חלון מידע אם גם המאפיינים title וגם snippet ריקים או nil.

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

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

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

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

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.map = mapView
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.map = mapView;
      

באמצעות המאפיין snippet ניתן להוסיף עוד טקסט שיופיע מתחת לכותרת בגופן קטן יותר. מחרוזות שאורכן עולה על הרוחב של חלון המידע גולשות באופן אוטומטי על פני מספר שורות. הודעות ארוכות מאוד עלולות להיקטע.

Swift

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
      

Objective-C

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
      

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

חלונות מידע נועדו להגיב לאירועי מגע של משתמשים על הסמן. אפשר להציג או להסתיר חלון מידע באופן פרוגרמטי על ידי הגדרת המאפיין selectedMarker של GMSMapView:

• הגדרה של selectedMarker כשם הסמן כדי להציג אותו.
• כדי להסתיר אותה, צריך להגדיר את selectedMarker לערך 'nil'.

Swift

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
// Show marker
mapView.selectedMarker = london
// Hide marker
mapView.selectedMarker = nil
      

Objective-C

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
// Show marker
mapView.selectedMarker = london;
// Hide marker
mapView.selectedMarker = nil;
      

הגדרת רענון אוטומטי של חלון מידע

הגדירו את tracksInfoWindowChanges בסמן ל-YES או ל-true, אם רוצים שמאפיינים חדשים או התוכן של חלון המידע יוצג מיידית לאחר השינוי, במקום להמתין עד שחלון המידע יוסתר ואז יופיע שוב. ברירת המחדל היא NO או false.

Swift

london.tracksInfoWindowChanges = true
      

Objective-C

london.tracksInfoWindowChanges = YES;
      

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

• אם צריך לבצע סדרה של שינויים, אפשר לשנות את הנכס ל-YES ואז לחזור ל-NO.
• כשהאנימציה פועלת או שהתוכן נטען באופן אסינכרוני, צריך להשאיר את ההגדרה של המאפיין ל-YES עד שהפעולות יושלמו.

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

שינוי המיקום של חלון מידע

חלון מידע משורטט מול מסך המכשיר, ממורכז מעל הסמן המשויך אליו. אפשר לשנות את המיקום של חלון המידע ביחס לסמן על ידי הגדרת המאפיין infoWindowAnchor. המאפיין הזה מקבל CGPoint, שמוגדר כקיזוז (x,y) כאשר גם x וגם טווח y בין 0.0 ל-1.0. הקיזוז ברירת המחדל הוא (0.5, 0.0), כלומר, החלק העליון העליון. קביעת ההיסט של infoWindowAnchor שימושית ליישור חלון המידע מול סמל מותאם אישית.

Swift

london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView
      

Objective-C

london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;
      

טיפול באירועים בחלונות מידע

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

• mapView:markerInfoWindow: — מתבצעת קריאה כשסמן עומד להיבחר. אפשר להחזיר חלון מידע מותאם אישית, כ-UIView, לשימוש עבור הסמן. מידע נוסף זמין בקטע חלונות מידע מותאמים אישית שבהמשך.

• mapView:markerInfoContents: — מתבצעת הקראה כאשר mapView:markerInfoWindow מחזיר 0.

• mapView:didCloseInfoWindowOfMarker: — מתבצעת קריאה כשחלון הפרטים של הסמן נסגר.

• mapView:didLongPressInfoWindowOfMarker: — מתבצעת קריאה אחרי לחיצה ארוכה על חלון המידע של הסמן.

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

GitHub כולל דוגמאות שמדגימות איך לטפל באירועים של חלון מידע:

• מטרה ג'
• Swift

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

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

חשוב לוודא שב-ViewController מוטמעת הפרוטוקול GMSIndoorDisplayDelegate ומגדירה listener עבור האירוע mapView:markerInfoWindow:. התכונה event listener מופעלת כשסמן עומד להיבחר, והיא מאפשרת להחזיר מופע של המחלקה UIView בהתאמה אישית כדי להגדיר את חלון המידע המותאם אישית שמשמש את הסמן.

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

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

דוגמאות הקוד ב-GitHub שמסופקות עם ה-SDK של מפות ל-iOS כוללות דוגמאות של חלונות מידע מותאמים אישית. לדוגמה, אפשר לעיין בהגדרה של MarkerInfoWindowViewController.m (Objective-C) או MarkerInfoWindowViewController.swift (Swift).

למידע על הורדה והפעלה של הדוגמאות האלה, ראו דוגמאות קוד.