חלונות מידע

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

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

התוכן של חלון המידע מוגדר לפי המאפיינים 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, שמוגדר כ-offset‏ (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 יש דוגמאות שממחישות איך לטפל באירועים של חלונות מידע:

• Objective-C
• Swift

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

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

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

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

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

במאמר דוגמאות קוד מוסבר איך מורידים את הדוגמאות האלה ומריצים אותן.