تعديل واجهة مستخدم التنقل

باستخدام حزمة SDK للتنقل لنظام التشغيل iOS، يمكنك تعديل تجربة المستخدم مع خريطتك من خلال تحديد عناصر وعناصر التحكم المضمنة في واجهة المستخدم التي تظهر على الخريطة، والإيماءات التي تسمح بها. يمكنك أيضًا تعديل المظهر المرئي لواجهة مستخدم التنقل. يُرجى الرجوع إلى صفحة السياسات للحصول على إرشادات حول التعديلات المقبولة على واجهة مستخدم التنقل.

عناصر التحكّم في واجهة المستخدم على الخريطة

توفر حزمة SDK للتنقل بعض عناصر التحكم المضمنة في واجهة المستخدم المشابهة لتلك الموجودة في تطبيق خرائط Google لنظام iOS. يمكنك التبديل بين مستوى ظهور عناصر التحكّم هذه باستخدام الفئة GMSUISettings. تظهر التغييرات التي تجريها على هذا الصف على الخريطة فورًا.

ملاحظة: لكل عنصر تحكم موضع محدد مسبقًا بالنسبة إلى حافة الخريطة. يمكنك نقل عناصر التحكّم بعيدًا عن الحواف من خلال ترك مساحة على الخريطة.

بوصلة

توفر حزمة SDK للتنقل رسم بوصلة يظهر في أعلى الزاوية اليسرى من الخريطة في ظل ظروف معينة وعند تفعيلها فقط. لا تظهر البوصلة إلا عندما تكون الكاميرا موجَّهة بحيث يكون لها اتجاه آخر غير الشمال بالضبط (اتجاه غير صفري). عندما ينقر المستخدم على البوصلة، تتحرك الكاميرا مرة أخرى إلى موضع مع انعطاف صفر (الاتجاه التلقائي) وتتلاشى البوصلة بعد فترة وجيزة.

في حال تفعيل ميزة التنقُّل وضبط وضع الكاميرا على "متابعة"، ستظل البوصلة مرئية، وانقر على البوصلة للتبديل بين منظور الكاميرا المائل ومنظور النظرة العامة.

يتم إيقاف البوصلة بشكل تلقائي. يمكنك تفعيل البوصلة من خلال ضبط السمة compassButton في GMSUISettings على YES. ومع ذلك، لا يمكنك فرض إظهار البوصلة دائمًا.

Swift

mapView.settings.compassButton = true

Objective-C

mapView.settings.compassButton = YES;

زر "موقعي الجغرافي"

يظهر الزر "موقعي" في أسفل الجانب الأيسر من الشاشة فقط عند تمكين الزر "موقعي". عندما ينقر مستخدم على الزر، تتحرك الكاميرا للتركيز على الموقع الحالي للمستخدم إذا كان موقع المستخدم معروفًا حاليًا. ويمكنك تفعيل الزرّ من خلال ضبط السمة myLocationButton في GMSUISettings على YES.

Swift

mapView.settings.myLocationButton = true

Objective-C

mapView.settings.myLocationButton = YES;

زر إعادة التوسيط

عند تمكين التنقل، يظهر زر إعادة توسيط عندما يقوم المستخدم بالتمرير في وضع الخريطة ويختفي عندما ينقر المستخدم لإعادة تركيز الخريطة. للسماح بظهور زر إعادة توسيط، اضبط السمة recenterButtonEnabled في GMSUISettings على YES. لمنع ظهور زر إعادة التوسيط، اضبط recenterButtonEnabled على NO.

Swift

mapView.settings.isRecenterButtonEnabled = true

Objective-C

mapView.settings.recenterButtonEnabled = YES;

ملحقات واجهة مستخدم الخريطة

توفر حزمة SDK للتنقل توفر ملحقات واجهة المستخدم التي تظهر أثناء التنقل بشكل مشابه لتلك الموجودة في تطبيق خرائط Google لنظام iOS. يمكنك ضبط مستوى الرؤية أو المظهر المرئي لعناصر التحكم كما هو موضح في هذا القسم. تظهر التغييرات التي تجريها هنا خلال رحلة السائق التالية.

رأس وتذييل التنقل

أثناء التنقل، يظهر عنوان التنقل في الجزء العلوي من الشاشة ويظهر تذييل التنقل في الجزء السفلي. يوضح رأس التنقل اسم الشارع واتجاهه للانعطاف التالي على المسار، بالإضافة إلى اتجاه الانعطاف التالي. يعرض تذييل التنقل الوقت والمسافة المقدرة إلى الوجهة، بالإضافة إلى الوقت المقدر للوصول.

يمكنك تبديل مستوى رؤية رأس وتذييل التنقل وتعيين ألوانه آليًا باستخدام الخصائص التالية:

• navigationHeaderEnabled — للتحكم في ما إذا كان عنوان التنقل مرئيًا (القيمة التلقائية هي true).
• navigationFooterEnabled — للتحكم في ما إذا كان تذييل التنقل مرئيًا أم لا (القيمة التلقائية هي true).
• navigationHeaderPrimaryBackgroundColor — لضبط لون الخلفية الأساسي لرأس التنقل.
• navigationHeaderSecondaryBackgroundColor - ضبط لون الخلفية الثانوي لرأس التنقل.

يوضّح مثال الرمز التالي تفعيل مستوى الرؤية للرأس والتذييل، ثم ضبط navigationHeaderPrimaryBackgroundColor على اللون الأزرق، وnavigationHeaderSecondaryBackgroundColor على الأحمر.

Swift

mapView.settings.isNavigationHeaderEnabled = true
mapView.settings.isNavigationFooterEnabled = true
mapView.settings.navigationHeaderPrimaryBackgroundColor = .blue
mapView.settings.navigationHeaderSecondaryBackgroundColor = .red

Objective-C

mapView.settings.navigationHeaderEnabled = YES;
mapView.settings.navigationFooterEnabled = YES;
mapView.settings.navigationHeaderPrimaryBackgroundColor = [UIColor blueColor];
mapView.settings.navigationHeaderSecondaryBackgroundColor = [UIColor redColor];

عرض رأس ملحق التنقل

يمكنك تخصيص التطبيق عن طريق استبدال طريقة عرض رأس التنقل الثانوية بطريقة عرض الملحقات المخصصة. يمكنك إجراء ذلك من خلال إنشاء طريقة عرض تنفّذ بروتوكول GMSNavigationAccessoryView. يتضمّن هذا البروتوكول طريقة واحدة مطلوبة: -heightForAccessoryViewConstrainedToSize:onMapView:. يتم منحك الحد الأقصى للحجم المتاح لعرضك في عنصر mapView المعطى، ويجب عليك تقديم الارتفاع الذي يتطلبه عرضك.

يمكنك بعد ذلك تمرير هذا العرض إلى mapView عن طريق طلب البيانات من خلال استدعاء setHeaderAccessoryView: mapView يحرّك أي طرق عرض حالية، ثم يتحرك في العرض المخصص. يجب أن يكون رأس التنقل مرئيًا حتى يمكن عرض طريقة العرض المخصّصة.

ملاحظة: يمكن أن يكون عرض الخريطة قصيرًا جدًا في الوضع الأفقي على بعض الهواتف الذكية، وبالتالي سيتم إخفاء العرض المخصّص.

لإزالة طريقة عرض ملحق العنوان المخصّصة، مرِّر nil إلى setHeaderAccessoryView:.

إذا كان يجب تغيير حجم طريقة العرض في أي وقت، يمكنك طلب الرمز invalidateLayoutForAccessoryView:، والانتقال إلى العرض الذي تحتاج إلى تغيير حجمه.

مثال

يوضّح مثال الرمز التالي طريقة عرض مخصّصة تنفّذ بروتوكول GMSNavigationAccessoryView. ثم يُستخدم طريقة العرض المخصصة هذه لتعيين عرض ملحق لرأس التنقل المخصص.

Swift

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)

Objective-C

@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];

قائمة الاتجاهات

يمكنك تقديم توجيهات مفصّلة في التطبيق. ويوضّح المثال التالي إحدى الطرق الممكنة للقيام بذلك. قد تختلف هذه الخطوات بناءً على تنفيذك الخاص.

1. تم تفعيل زر نقطة الدخول بعد setDestinations على أداة التنقّل GMSNavigator بنجاح وتم تفعيل guidanceActive على أداة التنقّل.
2. عندما ينقر المستخدم على زر نقطة الدخول، أنشئ GMSNavigationDirectionsListController (وحدة تحكم) مع أداة التنقّل مرتبطة بـ GMSMapView (mapView).
3. أضف وحدة التحكم إلى مثيل UIViewController (وحدة التحكم في العرض)، ثم أضف directionsListView كعرض فرعي لوحدة التحكم في العرض. يجب استدعاء الطريقتَين reloadData وinvalidateLayout على وحدة التحكّم كما هو الحال مع UICollectionView.
4. دفع وحدة التحكم في العرض إلى التسلسل الهرمي لوحدة التحكم في طرق العرض للتطبيق.

ملاحظات:

• ليس الغرض من قائمة الاتجاهات إعادة استخدامها، ويجب إعادة إنشائها لكل جلسة تنقّل.
• وتحتوي وحدة التحكم على إشارة ضعيفة فقط إلى أداة التنقّل.
• للحصول على عينة كاملة، يُرجى الرجوع إلى التطبيق التجريبي المتوفّر في الحزمة التي تم تنزيلها المذكورة في قسم إعداد مشروعك.

يوضّح مثال الرمز التالي إضافة DirectionsListViewController.

Swift

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()
  })
  ...
}

Objective-C

- (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.

Swift

mapView.settings.isNavigationTripProgressBarEnabled = true

Objective-C

mapView.settings.navigationTripProgressBarEnabled = YES;

إشارات المرور ولافتات التوقّف

يمكنك تفعيل إشارات المرور ولافتات التوقّف في mapView. باستخدام هذه الميزة، يمكن للسائق عرض إشارات المرور أو رموز علامات التوقف على طول طريقه، ما يوفر سياقًا أفضل لرحلات أكثر كفاءة ودقة.

يتم تلقائيًا إيقاف إشارات المرور وإشارات التوقّف في حزمة تطوير البرامج (SDK) للتنقّل على نظام التشغيل iOS. لتفعيل هذه الميزة، عليك استدعاء إعدادات GMSMapView لكل خيار على حدة: showsTrafficLights وshowsStopSigns.

Swift

mapView.settings.showsTrafficLights = YES;
mapView.settings.showsStopSigns = YES;

Objective-C

mapView.settings.showsTrafficLights = true;
mapView.settings.showsStopSigns = true;

التحكّم في عدّاد السرعة

عند تمكين التنقل، تعرض حزمة تطوير البرامج (SDK) للتنقل لنظام التشغيل iOS عنصر تحكم في حد السرعة في الزاوية السفلية من الخريطة والتي تعرض الحد الحالي للسرعة. عندما يتجاوز السائق الحدّ الأقصى للسرعة، يتم توسيع عنصر التحكّم لعرض عدّاد سرعة ثانيًا بالسرعة الحالية للسائق.

يمكنك ضبط مستويات التنبيه لتغيير تنسيق عرض عدّاد السرعة عندما يتجاوز السائق الحدّ الأقصى للسرعة بمقدار معيّن. على سبيل المثال، يمكنك تحديد أن السرعة الحالية يتم عرضها بلون نص أحمر عندما يتجاوز السائق حد السرعة بمقدار 5 ميل في الساعة، وبخلفية باللون الأحمر عندما يتجاوز السائق حد السرعة بمقدار 10 ميل في الساعة.

لعرض عنصر التحكّم في حدّ السرعة، يجب ضبط السمة shouldDisplaySpeedometer في السمة GMSUISettings على YES. لإيقاف عرض عنصر التحكّم في حدّ السرعة، اضبط shouldDisplaySpeedometer على NO.

Swift

mapView.shouldDisplaySpeedometer = true

Objective-C

mapView.shouldDisplaySpeedometer = YES;

لمزيد من المعلومات حول ضبط تنبيهات عدّاد السرعة، يُرجى الاطّلاع على القسم ضبط تنبيهات عدّاد السرعة.

علامات الوجهة

يمكنك إظهار علامات الوجهة أو إخفائها لمسار معيّن من خلال ضبط السمة showsDestinationMarkers في GMSUISettings. يوضح المثال التالي إيقاف علامات الوجهة.

Swift

mapView.settings.showsDestinationMarkers = false

Objective-C

mapView.settings.showsDestinationMarkers = NO;

ملاحظة: يمكنك تحديد صورة مخصّصة كعلامة، ولكن حزمة تطوير البرامج (SDK) لا تتيح حاليًا تصنيف هذه الصور باستخدام نص. لمزيد من المعلومات، يُرجى الاطّلاع على العلامات.

ميزات تجربة الخرائط

توفر لك حزمة SDK للتنقل إمكانية إجراء مزيد من التخصيصات لتجربة التنقل للمستخدمين. تنعكس التغييرات التي تجريها على المثيل أثناء التحديث التالي لبرنامج التشغيل لتطبيقك.

إيقاف إيماءات الخريطة التلقائية

يمكنك إيقاف الإيماءات التلقائية على الخريطة من خلال ضبط سمات فئة GMSUISettings المتاحة كسمة لفئة GMSMapView. يمكن تفعيل الإيماءات التالية وإيقافها آليًا. يُرجى العلم أنّ إيقاف الإيماءة لن يحدّ من الوصول الآلي إلى إعدادات الكاميرا.

• scrollGestures: للتحكّم في تفعيل إيماءات التمرير أو إيقافها إذا كان هذا الخيار مفعَّلاً، يمكن للمستخدمين التمرير سريعًا لتحريك الكاميرا.
• zoomGestures: للتحكم في ما إذا كانت إيماءات التكبير أو التصغير مفعّلة أو غير مفعَّلة في حال تفعيل هذا الإعداد، يمكن للمستخدمين النقر مرّتين أو النقر بإصبعين أو التصغير بإصبعين لتكبير الكاميرا أو تصغيرها. تجدر الإشارة إلى أنّ النقر مرّتين أو التصغير بإصبعَين عند تفعيل scrollGestures قد يؤدي إلى تحريك الكاميرا إلى النقطة المحددة.
• tiltGestures: للتحكّم في تفعيل إيماءات الإمالة أو إيقافها في حال تفعيل هذا الإعداد، يمكن للمستخدمين التمرير سريعًا للأعلى أو للأسفل بإصبعَين لإمالة الكاميرا.
• rotateGestures: للتحكّم في تفعيل إيماءات التدوير أو إيقافها في حال تفعيل هذا الإعداد، يمكن للمستخدمين استخدام إيماءة التدوير بإصبعين لتدوير الكاميرا.

في هذا المثال، تم إيقاف كل من إيماءات التحريك والتكبير/التصغير.

Swift

mapView.settings.scrollGestures = false
mapView.settings.zoomGestures = false

Objective-C

mapView.settings.scrollGestures = NO;
mapView.settings.zoomGestures = NO;

عناصر التحكم في الموضع وعناصر واجهة المستخدم

يمكنك تحديد موضع عناصر التحكم وعناصر واجهة المستخدم الأخرى بالنسبة إلى موضع رأس التنقّل وتذييله، باستخدام السمات التالية:

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide

يوضح مثال الرمز التالي استخدام أدلة التخطيط لوضع زوج من التسميات في عرض الخريطة:

Swift

/* 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

Objective-C

/* 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;

إخفاء المسارات البديلة

عندما تصبح واجهة المستخدم مزدحمة بكم كبير جدًا من المعلومات، يمكنك تقليل الفوضى من خلال عرض مسارات بديلة أقل من المسار التلقائي (مساران)، أو من خلال عدم عرض أي مسارات بديلة على الإطلاق. يمكنك ضبط هذا الخيار قبل استرجاع المسارات من خلال ضبط GMSNavigationRoutingOptions، وضبط alternateRoutesStrategy باستخدام إحدى قيم التعداد التالية:

قيمة التعداد	الوصف
خرائط Google للتنقّل البديل	تلقائي: عرض ما يصل إلى مسارين بديلين.
ميزة "خرائط Google" للتنقّل البديلة	عرض مسار بديل واحد (إذا كان متاحًا).
GMSNavigationAlternateRoutesStrategyNone	لإخفاء المسارات البديلة.

مثال

يوضح مثال الرمز التالي كيفية إخفاء المسارات البديلة تمامًا.

Swift

let routingOptions = GMSNavigationRoutingOptions(alternateRoutesStrategy: .none)
navigator?.setDestinations(destinations,
                           routingOptions: routingOptions) { routeStatus in
  ...
}

Objective-C

GMSNavigationRoutingOptions *routingOptions = [[GMSNavigationRoutingOptions alloc] initWithAlternateRoutesStrategy:GMSNavigationAlternateRoutesStrategyNone];
[navigator setDestinations:destinations
            routingOptions:routingOptions
                  callback:^(GMSRouteStatus routeStatus){...}];

تحذير: هذه الميزة غير متوافقة حاليًا مع تفضيل التوجيه الأقصر. قد ينتج عن استخدام كلتا الميزتَين في الوقت نفسه سلوك غير متوقّع.