חלונות מידע

בחירת פלטפורמה: 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 ומגדיר את ה-listener mapView:markerInfoWindow: אירוע. מתבצעת קריאה ל-event listener הזה כאשר סמן עומד להפוך נבחר, ומאפשר להחזיר מופע של המחלקה המותאמת אישית UIView מגדירים את חלון המידע המותאם אישית שמשמש את הסמן.

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

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

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

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