חלונות מידע

בחירת פלטפורמה: 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;

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

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

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

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

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

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

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

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

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

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

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