חלונות מידע

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

london.tracksInfoWindowChanges = true
      

london.tracksInfoWindowChanges = YES;
      

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• יעד ג'
• סוויפט

חלונות מידע מותאמים אישית

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

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

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

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

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