חלונות מידע

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

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

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

• Objective-C
• Swift

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

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

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

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

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

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