באמצעות Navigation SDK ל-iOS, תוכלו לשנות את חוויית המשתמש במפה על ידי קביעת הפקדים והרכיבים המובנים של ממשק המשתמש שיוצגו במפה, והמחוות שתאפשרו. אפשר גם לשנות את המראה החזותי של ממשק המשתמש של הניווט. בדף המדיניות מפורטות הנחיות לגבי שינויים מותרים בממשק המשתמש של תפריט הניווט.
פקדי ממשק המשתמש של המפה
Navigation SDK מספק כמה אמצעי בקרה מובנים בממשק המשתמש, שדומים לאלה שקיימים באפליקציית מפות Google ל-iOS. אפשר להחליף את הסטטוס של החשיפה של אמצעי הבקרה האלה באמצעות הכיתה GMSUISettings
.
שינויים שיבוצעו בקטגוריה הזו ישתקפו במפה באופן מיידי.
מצפן
Navigation SDK מספק גרפיקה של מצפן שמופיעה בפינה השמאלית העליונה של המפה בנסיבות מסוימות, ורק כשהיא מופעלת. המצפן מופיע רק כשהמצלמה מוכוונת כך שיש לה כיוון ששונה מצפון מדויק (כיוון שאינו אפס). כשהמשתמש לוחץ על המצפן, המצלמה חוזרת לתנועה חזרה למיקום עם כיוון של אפס (הכיוון שמוגדר כברירת מחדל) והמצפן נעלם זמן קצר לאחר מכן.
אם הניווט מופעל ומצב המצלמה מוגדר ל'מעקב', מצפן המפה יישאר גלוי. הקשה על המצפן תאפשר לעבור בין תצוגת המצלמה המוטה לתצוגת המצלמה הרחבה.
מצפן מושבת כברירת מחדל. כדי להפעיל את המצפן, מגדירים את הנכס compassButton
של GMSUISettings
ל-true
. עם זאת, אי אפשר לאלץ את מצפן המפה להופיע תמיד.
mapView.settings.compassButton = true
mapView.settings.compassButton = YES;
לחצן 'המיקום שלי'
הלחצן 'המיקום שלי' מופיע בפינה השמאלית התחתונה של המסך רק כשהוא מופעל. כשמשתמש לוחץ על הלחצן, המצלמה מבצעת אנימציה כדי להתמקד במיקום הנוכחי של המשתמש, אם המיקום של המשתמש ידוע כרגע. כדי להפעיל את הלחצן, מגדירים את הנכס myLocationButton
של GMSUISettings
לערך true
.
mapView.settings.myLocationButton = true
mapView.settings.myLocationButton = YES;
הלחצן 'מרכוז המפה'
כשהניווט מופעל, הכפתור להצגת המפה במרכז מופיע כשהמשתמש גולל בתצוגת המפה, ונעלם כשהמשתמש מקייש כדי להציג את המפה במרכז. כדי לאפשר ללחצן 'הצגת הפריטים האחרונים' להופיע, צריך להגדיר את המאפיין recenterButtonEnabled
של GMSUISettings
לערך true
. כדי למנוע את הצגת הלחצן 'מרכוז מחדש', מגדירים את recenterButtonEnabled
לערך false
.
mapView.settings.isRecenterButtonEnabled = true
mapView.settings.recenterButtonEnabled = YES;
אביזרים לממשק המשתמש של המפה
Navigation SDK מספק אביזרי ממשק משתמש שמופיעים במהלך הניווט, בדומה לאלה שמופיעים באפליקציית מפות Google ל-iOS. אפשר לשנות את ההצגה או את המראה החזותי של אמצעי הבקרה האלה, כפי שמתואר בקטע הזה. השינויים שתבצעו כאן ישתקפו במהלך הנסיעה הבאה של המשתמש.
כותרת עליונה ותחתונה של ניווט
במהלך הניווט, הכותרת של תפריט הניווט מופיעה בחלק העליון של המסך, והכותרת התחתונה של תפריט הניווט מופיעה בחלק התחתון. בכותרת הניווט מוצגים שם הרחוב והכיוון של הפניה הבאה במסלול, וגם הכיוון של הפניה הבאה. בכותרת התחתונה של המסך מוצגים המרחק והזמן המשוער ליעד, וגם זמן ההגעה המשוער.
אפשר להחליף את ההצגה של הכותרת העליונה והכותרת התחתונה של הניווט ולהגדיר את הצבעים שלהן באופן פרוגרמטי באמצעות המאפיינים הבאים:
navigationHeaderEnabled
— קובעת אם כותרת הניווט גלויה (ברירת המחדל היאtrue
).navigationFooterEnabled
— קובעת אם הכותרת התחתונה של הניווט גלויה (ברירת המחדל היאtrue
).navigationHeaderPrimaryBackgroundColor
— מגדיר את צבע הרקע הראשי של כותרת הניווט.navigationHeaderSecondaryBackgroundColor
— מגדיר את צבע הרקע המשני של כותרת הניווט.
בדוגמת הקוד הבאה מוצגת הפעלת החשיפה של הכותרת והכותרת התחתונה, ואז הגדרת navigationHeaderPrimaryBackgroundColor
לכחול ו-navigationHeaderSecondaryBackgroundColor
לאדום.
mapView.settings.isNavigationHeaderEnabled = true
mapView.settings.isNavigationFooterEnabled = true
mapView.settings.navigationHeaderPrimaryBackgroundColor = .blue
mapView.settings.navigationHeaderSecondaryBackgroundColor = .red
mapView.settings.navigationHeaderEnabled = YES;
mapView.settings.navigationFooterEnabled = YES;
mapView.settings.navigationHeaderPrimaryBackgroundColor = [UIColor blueColor];
mapView.settings.navigationHeaderSecondaryBackgroundColor = [UIColor redColor];
תצוגת הכותרת של אביזרי הניווט
אתם יכולים להתאים אישית את האפליקציה על ידי החלפת תצוגת הכותרת המשנית של הניווט בתצוגה מותאמת אישית של אביזרים. כדי לעשות זאת, יוצרים תצוגה שמטמיעה את פרוטוקול GMSNavigationAccessoryView
. לפרוטוקול הזה יש שיטה אחת חובה: -heightForAccessoryViewConstrainedToSize:onMapView:
. המערכת מציגה את הגודל המקסימלי הזמין לתצוגה שלכם במפה, וצריך לציין את הגובה הנדרש לתצוגה.
לאחר מכן אפשר להעביר את התצוגה הזו אל mapView באמצעות קריאה ל-setHeaderAccessoryView:
. התצוגה המותאמת אישית תופיע עם אנימציה, אחרי שהאנימציה של התצוגות הנוכחיות תסתיים. כותרת הניווט חייבת להיות גלויה כדי שהתצוגה המותאמת אישית תוצג.
כדי להסיר את תצוגת האביזר של הכותרת בהתאמה אישית, מעבירים את הערך nil
אל setHeaderAccessoryView:
.
אם צריך לשנות את הגודל של התצוגה בכל שלב, אפשר להפעיל את invalidateLayoutForAccessoryView:
ולהעביר את התצוגה שרוצים לשנות את הגודל שלה.
דוגמה
דוגמת הקוד הבאה ממחישה תצוגה מותאמת אישית שמטמיעה את פרוטוקול GMSNavigationAccessoryView
. לאחר מכן, התצוגה בהתאמה אישית הזו משמשת להגדרת תצוגה משלימה בהתאמה אישית של כותרת הניווט.
class MyCustomView: UIView, GMSNavigationAccessoryView {
…
func heightForAccessoryViewConstrained(to size: CGSize, on mapView: GMSMapView) -> CGFloat {
// viewHeight gets calculated as the height your view needs.
return viewHeight
}
…
}
let customView = MyCustomView(...)
mapView.setHeaderAccessory(customView)
// At some later point customView changes size.
mapView.invalidateLayout(forAccessoryView: customView)
// Remove the custom header accessory view.
mapView.setHeaderAccessory(nil)
@interface MyCustomView : UIView <GMSNavigationAccessoryView>
…
@end
@implementation MyCustomView
…
- (CGFloat)heightForAccessoryViewConstrainedToSize:(CGSize)size onMapView:(GMSMapView *)mapView {
// viewHeight gets calculated as the height your view needs.
return viewHeight;
}
…
@end
MyCustomView *customView = [[MyCustomView alloc] init…];
[_mapView setHeaderAccessoryView:customView];
// At some later point customView changes size.
[_mapView invalidateLayoutForAccessoryView:customView];
// Remove the custom header accessory view.
[_mapView setHeaderAccessoryView:nil];
רשימת מסלולים
אתם יכולים לספק באפליקציה הוראות מפורטות. בדוגמה הבאה מוסבר איך עושים את זה. השלבים האלה עשויים להשתנות בהתאם להטמעה שלכם.
- מפעילים לחצן של נקודת כניסה אחרי ש-
setDestinations
ב-GMSNavigator
(הנווט) הושלם בהצלחה ו-guidanceActive
ב-Navigator הופעל. - כשמשתמש מקשיק על לחצן נקודת הכניסה, יוצרים
GMSNavigationDirectionsListController
(בקר) עם הניווט שמשויך ל-GMSMapView
(mapView
). - מוסיפים את הבקר למכונה של
UIViewController
(בקר תצוגה) ומוסיפים אתdirectionsListView
כתצוגת משנה של בקר התצוגה. צריך להפעיל את השיטותreloadData
ו-invalidateLayout
ב-Controller כמו שמפעילים אתUICollectionView
. - דוחפים את ה-View Controller להיררכיית ה-View Controller של האפליקציה.
בדוגמת הקוד הבאה מוצגת הוספה של DirectionsListViewController
.
override func viewDidLoad() {
super.viewDidLoad()
// Add the directionsListView to the host view controller's view.
let directionsListView = directionsListController.directionsListView
directionsListView.frame = self.view.frame
self.view.addSubview(directionsListView)
directionsListView.translatesAutoresizingMaskIntoConstraints = false
directionsListView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
directionsListView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
directionsListView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
directionsListView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
...
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// Ensure data is fresh when the view appears.
directionsListController.reloadData()
...
}
override func willTransition(to newCollection: UITraitCollection, with coordinator: UIViewControllerTransitionCoordinator) {
super.willTransition(to: newCollection, with: coordinator)
// Invalidate the layout during rotation.
coordinator.animate(alongsideTransition: {_ in
self.directionsListController.invalidateLayout()
})
...
}
- (void)viewDidLoad {
[super viewDidLoad];
// Add the directionsListView to the host view controller's view.
UIView *directionsListView = _directionsListController.directionsListView;
directionsListView.frame = self.view.bounds;
[self.view addSubview:directionsListView];
directionsListView.translatesAutoresizingMaskIntoConstraints = NO;
[directionsListView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
[directionsListView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor].active = YES;
[directionsListView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor].active = YES;
[directionsListView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
...
}
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
// Ensure data is fresh when the view appears.
[_directionsListController reloadData];
...
}
- (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[super willTransitionToTraitCollection:newCollection withTransitionCoordinator:coordinator];
void(^animationBlock)(id <UIViewControllerTransitionCoordinatorContext>context) =
^void(id <UIViewControllerTransitionCoordinatorContext>context) {
[_directionsListController invalidateLayout];
};
// Invalidate the layout during rotation.
[coordinator animateAlongsideTransition:animationBlock
completion:nil];
...
}
...
סרגל ההתקדמות של הנסיעה
סרגל ההתקדמות של המסלול הוא סרגל אנכי שמופיע בצד ההתחלה/הקדמי של המפה כשהניווט מתחיל. כשהאפשרות הזו מופעלת, מוצגת סקירה כללית של כל הנסיעה, יחד עם היעד והמיקום הנוכחי של המשתמש.
המפה מאפשרת למשתמשים לחזות במהירות בעיות שצפויות לקרות, כמו פקקים, בלי צורך להתקרב למפה. לאחר מכן, הם יוכלו לשנות את מסלול הנסיעה לפי הצורך. אם המשתמש משנה את מסלול הנסיעה, סרגל ההתקדמות מתאפס כאילו נסיעה חדשה מתחילה מהנקודה הזו.
בסרגל התקדמות הנסיעה מוצגים אינדיקטורים של הסטטוס הבא:
סטטוס התנועה – הסטטוס של התנועה הצפויה.
המיקום הנוכחי – המיקום הנוכחי של הנהג בנסיעה.
הזמן שחלף במסלול – החלק של הנסיעה שחלף.
כדי להפעיל את סרגל ההתקדמות של הנסיעה, מגדירים את המאפיין navigationTripProgressBarEnabled
בקטע GMSUISettings.
mapView.settings.isNavigationTripProgressBarEnabled = true
mapView.settings.navigationTripProgressBarEnabled = YES;
מיקום סרגל ההתקדמות של הנסיעה
- הצד ימין של הסרגל מיושר בערך עם הצד ימין של מד המהירות, הלוגו של Google והלחצן 'מרכוז מחדש' (אם הוא גלוי). הרוחב הוא 12 נקודות.
- סרגל ההתקדמות של הנסיעה משתנה באופן דינמי בהתאם למרחב האנכי במסך. החלק התחתון של הסרגל ממוקם 210 נקודות מתחתית המסך. החלק העליון של סרגל ההתקדמות של הנסיעה נשאר לפחות 170 נקודות טיפוגרפיות (pt) מחלקו העליון של המסך, והגובה המקסימלי של הסרגל הוא 400 נקודות טיפוגרפיות.
- אם סרגל ההתקדמות של הנסיעה חופף לכרטיס הפניה או לאלמנטים אחרים בממשק המשתמש של הניווט, הוא יופיע מתחת לאלמנטים האחרים האלה.
Prompt Visibility API (ניסיוני)
באמצעות Prompt Visibility API אפשר למנוע התנגשויות בין רכיבי ממשק המשתמש שנוצרים על ידי Navigation SDK לבין רכיבי ממשק המשתמש בהתאמה אישית שלכם. לשם כך, מוסיפים מאזין שיקבל קריאה חוזרת לפני שרכיב ממשק המשתמש של Navigation SDK עומד להופיע, וכשהרכיב יוסר. למידע נוסף, כולל דוגמאות קוד, תוכלו לקרוא את הקטע Prompt Visibility API בדף Configure real-time-disruptions.
רמזורים וסימני עצירה
אפשר להפעיל את הצגת רמזור ושילוט עצור במהלך ניווט פעיל ב-mapView
, כדי לספק הקשר נוסף למסלולים ולתמרונים בנסיעה.
כברירת מחדל, רמזור ותמרור עצור מושבתים ב-Navigation SDK ל-iOS. כדי להפעיל את התכונה הזו, צריך להפעיל את ההגדרות של GMSMapView
לכל אפשרות בנפרד: showsTrafficLights
ו-showsStopSigns
.
mapView.settings.showsTrafficLights = true
mapView.settings.showsStopSigns = true
mapView.settings.showsTrafficLights = YES;
mapView.settings.showsStopSigns = YES;
שליטה במד המהירות
כשהניווט מופעל ומצב הנסיעה מוגדר ל'נהיגה', ב-Navigation SDK ל-iOS מוצג פקד של הגבלת מהירות בפינה התחתונה של המפה, שבו מוצגת הגבלת המהירות הנוכחית. כשהנהג חורג ממגבלת המהירות, הלחצן מתרחב ומציג מד מהירות שני עם המהירות הנוכחית של הנהג.
אפשר להגדיר רמות התראות כדי לשנות את הפורמט של תצוגת מד המהירות כשהנהג חורג מהמהירות המותרת בסכום מסוים. לדוגמה, אפשר לציין שהמהירות הנוכחית תוצג עם טקסט בצבע אדום כשהנהג יחרוג ממהירות המותרת ב-8 קמ"ש, ועם רקע אדום כשהנהג יחרוג ממהירות המותרת ב-16 קמ"ש.
כדי להציג את הפקדים של מגבלת המהירות, מגדירים את הנכס shouldDisplaySpeedometer
של GMSUISettings
לערך true
. כדי להשבית את הצגת אמצעי הבקרה של מגבלת המהירות, מגדירים את shouldDisplaySpeedometer
לערך false
.
mapView.shouldDisplaySpeedometer = true
mapView.shouldDisplaySpeedometer = YES;
מידע נוסף על הגדרת התראות למד מהירות זמין במאמר הגדרת התראות למד מהירות.
סמנים של יעדים
כדי להציג או להסתיר את סמני היעד במסלול נתון, מגדירים את המאפיין showsDestinationMarkers
של GMSUISettings
. בדוגמה הבאה מוסבר איך משביתים את סמלי היעד.
mapView.settings.showsDestinationMarkers = false
mapView.settings.showsDestinationMarkers = NO;
תכונות של חוויית המפה
באמצעות Navigation SDK תוכלו לבצע התאמות אישיות נוספות לחוויית הניווט של המשתמשים. השינויים שתבצעו במכונה ישתקפו בעדכון הבא של האפליקציה על ידי המשתמש.
השבתת מחוות ברירת המחדל במפה
אפשר להשבית את תנועות ברירת המחדל במפה על ידי הגדרת מאפיינים של הכיתה GMSUISettings
, שזמינה כמאפיין של GMSMapView
.
אפשר להפעיל ולהשבית את התנועות הבאות באופן פרוגרמטי. חשוב לדעת שהשבתה של התנועות לא תגביל את הגישה הפרוגרמטית להגדרות המצלמה.
scrollGestures
— קובע אם תנועות הגלילה מופעלות או מושבתות. אם ההגדרה הזו מופעלת, המשתמשים יוכלו להחליק כדי להזיז את המצלמה.zoomGestures
— קובעת אם תנועות הזום מופעלות או מושבתות. אם ההגדרה הזו מופעלת, המשתמשים יכולים להקיש פעמיים, להקיש בשתי אצבעות או לסמן תנועת צביטה כדי לשנות את מרחק הצילום במצלמה. חשוב לזכור שהקשה כפולה או צביטה כשהאפשרותscrollGestures
מופעלת עשויות להזיז את המצלמה לנקודה שצוינה.tiltGestures
– קובעת אם תנועות הטיה מופעלות או מושבתות. אם האפשרות הזו מופעלת, המשתמשים יכולים להשתמש בהחלקה אנכית למטה או למעלה עם שתי אצבעות כדי להטות את המצלמה.rotateGestures
— קובעת אם תנועות הסיבוב מופעלות או מושבתות. אם ההגדרה הזו מופעלת, המשתמשים יוכלו להשתמש בתנועת סיבוב של שתי אצבעות כדי לסובב את המצלמה.
בדוגמה הזו, גם תנועות ההזזה וגם תנועות הזום הושבתו.
mapView.settings.scrollGestures = false
mapView.settings.zoomGestures = false
mapView.settings.scrollGestures = NO;
mapView.settings.zoomGestures = NO;
רכיבי ממשק משתמש ואמצעי בקרה למיקום
אפשר למקם רכיבי בקרה ורכיבים אחרים בממשק המשתמש ביחס למיקום של כותרת הניווט והכותרת התחתונה באמצעות המאפיינים הבאים:
navigationHeaderLayoutGuide
navigationFooterLayoutGuide
bottomTrailingButtonsLayoutGuide
בדוגמת הקוד הבאה מוצגת שימוש בהנחיות הפריסה כדי למקם זוג תוויות בתצוגת המפה:
/* Add a label to the top left, positioned below the header. */
let topLabel = UILabel()
topLabel.text = "Top Left"
mapView.addSubview(topLabel)
topLabel.translatesAutoresizingMaskIntoConstraints = false
topLabel.topAnchor.constraint(equalTo: mapView.navigationHeaderLayoutGuide.bottomAnchor).isActive = true
topLabel.leadingAnchor.constraint(equalTo: mapView.leadingAnchor).isActive = true
/* Add a label to the bottom right, positioned above the footer. */
let bottomLabel = UILabel()
bottomLabel.text = "Bottom Right"
mapView.addSubview(bottomLabel)
bottomLabel.translatesAutoresizingMaskIntoConstraints = false
bottomLabel.bottomAnchor.constraint(equalTo: mapView.navigationFooterLayoutGuide.topAnchor).isActive = true
bottomLabel.trailingAnchor.constraint(equalTo: mapView.trailingAnchor).isActive = true
/* Add a label to the top left, positioned below the header. */
UILabel *topLabel = [[UILabel alloc] init];
topLabel.text = @"Top Left";
[view addSubview:topLabel];
topLabel.translatesAutoresizingMaskIntoConstraints = NO;
[topLabel.topAnchor
constraintEqualToAnchor:mapView.navigationHeaderLayoutGuide.bottomAnchor].active = YES;
[topLabel.leadingAnchor constraintEqualToAnchor:mapView.leadingAnchor].active = YES;
/* Add a label to the bottom right, positioned above the footer. */
UILabel *bottomLabel = [[UILabel alloc] init];
bottomLabel.text = @"Bottom Right";
[view addSubview:bottomLabel];
bottomLabel.translatesAutoresizingMaskIntoConstraints = NO;
[bottomLabel.bottomAnchor
constraintEqualToAnchor:mapView.navigationFooterLayoutGuide.topAnchor].active = YES;
[bottomLabel.trailingAnchor constraintEqualToAnchor:mapView.trailingAnchor].active = YES;
דוגמה לשימוש ב-bottomTrailingButtonsLayoutGuide
כדי למקם את הלחצן לדיווח על שיבושים בזמן אמת מפורטת במאמר הגדרת שיבושים בזמן אמת.
הסתרת מסלולים חלופיים
אם ממשק המשתמש עמוס במידע רב מדי, תוכלו להציג פחות מסלולים חלופיים מברירת המחדל (שניים) או לא להציג מסלולים חלופיים בכלל. אפשר להגדיר את האפשרות הזו לפני שאתם מאחזרים את המסלולים, על ידי הגדרת GMSNavigationRoutingOptions
והגדרת alternateRoutesStrategy
לאחד מערכי המנייה הבאים:
ערך מספור | תיאור |
---|---|
GMSNavigationAlternateRoutesStrategyAll | ברירת מחדל. מוצגים עד שני מסלולים חלופיים. |
GMSNavigationAlternateRoutesStrategyOne | מוצג מסלול חלופי אחד (אם יש מסלול חלופי). |
GMSNavigationAlternateRoutesStrategyNone | הסתרת מסלולים חלופיים. |
דוגמה
בדוגמת הקוד הבאה מוסבר איך להסתיר מסלולים חלופיים לגמרי.
let routingOptions = GMSNavigationRoutingOptions(alternateRoutesStrategy: .none)
navigator?.setDestinations(destinations,
routingOptions: routingOptions) { routeStatus in
...
}
GMSNavigationRoutingOptions *routingOptions = [[GMSNavigationRoutingOptions alloc] initWithAlternateRoutesStrategy:GMSNavigationAlternateRoutesStrategyNone];
[navigator setDestinations:destinations
routingOptions:routingOptions
callback:^(GMSRouteStatus routeStatus){...}];