باستخدام حزمة تطوير البرامج Navigation SDK لنظام التشغيل iOS، يمكنك تعديل تجربة المستخدم مع خريطتك من خلال تحديد عناصر واجهة المستخدم وعناصر التحكّم المضمّنة التي تظهر على الخريطة والإيماءات التي تسمح بها. يمكنك أيضًا تعديل المظهر المرئي لواجهة مستخدم التنقّل. راجِع صفحة السياسات للحصول على إرشادات بشأن التعديلات المقبولة على واجهة مستخدم التنقّل.
عناصر التحكّم في واجهة المستخدم في الخريطة
توفّر حزمة تطوير البرامج للتنقّل بعض عناصر التحكّم في واجهة المستخدم المضمّنة
المشابهة لتلك المتوفّرة في تطبيق "خرائط Google" لأجهزة iOS. يمكنك
تبديل مستوى ظهور عناصر التحكّم هذه باستخدام فئة GMSUISettings
.
تظهر التغييرات التي تجريها على هذه الفئة على الخريطة على الفور.
البوصلة
توفّر حزمة تطوير البرامج (SDK) لميزة التنقّل رسمًا لبوصلة يظهر في أعلى يسار الخريطة في ظروف معيّنة وعند تفعيله فقط. لا تظهر البوصلة إلا عند توجيه الكاميرا بحيث يكون لها اتجاه غير الشمال الدقيق (اتجاه غير صفري). عندما ينقر المستخدم على السهم المغناطيسي، تعود الكاميرا إلى وضعها الأصلي مع اتجاه صفري (وهو الاتجاه التلقائي) ويختفي السهم المغناطيسي بعد ذلك بوقت قصير.
إذا كان التنقّل مفعّلاً وتم ضبط وضع الكاميرا على "تتبُّع"، تظل البوصلة مرئية، وعند النقر عليها، يتم التبديل بين منظورَي الكاميرا "المائل" و"نظرة عامة".
تكون البوصلة غير مفعَّلة تلقائيًا. يمكنك تفعيل البوصلة من خلال ضبط سمة
compassButton
في GMSUISettings
على true
. ومع ذلك، لا يمكنك
فرض عرض البوصلة دائمًا.
Swift
mapView.settings.compassButton = true
Objective-C
mapView.settings.compassButton = YES;
زر "موقعي الجغرافي"
يظهر زر "موقعي الجغرافي" في أسفل يسار الشاشة فقط
عند تفعيل الزر. عندما ينقر المستخدم على الزر، تتحرّك
الكاميرا لتركز على الموقع الجغرافي الحالي للمستخدم إذا كان معروفًا
حاليًا. يمكنك تفعيل الزر من خلال ضبط سمة
myLocationButton
للعنصر GMSUISettings
على true
.
Swift
mapView.settings.myLocationButton = true
Objective-C
mapView.settings.myLocationButton = YES;
زر إعادة توسيع الخريطة
عند تفعيل التنقّل، يظهر زر إعادة التوسّط عندما ينتقل المستخدم
إلى عرض الخريطة، ويختفي عندما ينقر المستخدم لإعادة ضبط الخريطة في منتصف الشاشة. للسماح بظهور زر
"إعادة التقديم"، اضبط سمة recenterButtonEnabled
الخاصة
GMSUISettings
على true
. لمنع ظهور زر إعادة التوسيع، اضبط
recenterButtonEnabled
على false
.
Swift
mapView.settings.isRecenterButtonEnabled = true
Objective-C
mapView.settings.recenterButtonEnabled = YES;
ملحقات واجهة مستخدِم "خرائط Google"
توفّر حزمة تطوير البرامج (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];
قائمة الاتجاهات
يمكنك تقديم اتجاهات مفصّلة في تطبيقك. يوضّح المثال التالي طريقة واحدة لإجراء ذلك. قد تختلف هذه الخطوات حسب عملية التنفيذ التي تتّبعها.
- فعِّل زر نقطة دخول بعد اكتمال
setDestinations
علىGMSNavigator
(المستكشف) بنجاح وتفعيلguidanceActive
على المستكشف. - عند نقر المستخدم على زر نقطة الدخول، أنشئ
GMSNavigationDirectionsListController
(وحدة تحكّم) باستخدام المستكشف المرتبط بـGMSMapView
(mapView
). - أضِف وحدة التحكّم إلى مثيل من
UIViewController
(عنصر تحكّم في العرض)، وأضِفdirectionsListView
كعرض فرعي لعنصر التحكّم في العرض. يجب استدعاء الطريقتَينreloadData
وinvalidateLayout
في وحدة التحكّم كما هو الحال معUICollectionView
. - ادفع "عنصر التحكّم في العرض" إلى التسلسل الهرمي لعناصر التحكّم في العرض في التطبيق.
يوضّح مثال الرمز البرمجي التالي إضافة 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 = true
mapView.settings.showsStopSigns = true
Objective-C
mapView.settings.showsTrafficLights = YES;
mapView.settings.showsStopSigns = YES;
التحكّم في عدّاد السرعة
عند تفعيل التنقّل وضبط وضع التنقّل على "القيادة"، يعرض Navigation SDK لنظام التشغيل iOS عنصر تحكّم في الحدّ الأقصى للسرعة في الزاوية السفلية من الخريطة يعرض الحدّ الأقصى الحالي للسرعة. عندما يتجاوز السائق الحدّ الأقصى للسرعة، يتم توسيع عنصر التحكّم لعرض عداد سرعة ثانٍ يعرض السرعة الحالية للسائق.
يمكنك ضبط مستويات التنبيهات لتغيير تنسيق شاشة مقياس السرعة عندما يتجاوز السائق الحد الأقصى للسرعة بمقدار محدّد. على سبيل المثال، يمكنك تحديد أن يتم عرض السرعة الحالية بلون نص أحمر عندما يتجاوز السائق الحد الأقصى للسرعة بمقدار 5 أميال في الساعة، وبلون خلفية أحمر عندما يتجاوز السائق الحد الأقصى للسرعة بمقدار 10 أميال في الساعة.
لعرض عنصر التحكّم في الحدّ الأقصى للسرعة، اضبط السمة shouldDisplaySpeedometer
لسمة
GMSUISettings
على true
. لإيقاف عرض وحدة التحكّم في الحد الأقصى للسرعة، اضبط
shouldDisplaySpeedometer
على false
.
Swift
mapView.shouldDisplaySpeedometer = true
Objective-C
mapView.shouldDisplaySpeedometer = YES;
لمزيد من المعلومات عن ضبط التنبيهات لعداد السرعة، يُرجى الاطّلاع على مقالة ضبط تنبيهات عداد السرعة.
علامات الوجهات
يمكنك إظهار علامات الوجهة لمسار معيّن أو إخفاؤها من خلال ضبط سمة
showsDestinationMarkers
الخاصة بسمة GMSUISettings
. يوضّح المثال التالي
إيقاف علامات الوجهات.
Swift
mapView.settings.showsDestinationMarkers = false
Objective-C
mapView.settings.showsDestinationMarkers = NO;
ميزات تجربة "خرائط Google"
تتيح لك حزمة Navigation 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
باستخدام إحدى قيم التعداد التالية:
قيمة التعداد | الوصف |
---|---|
GMSNavigationAlternateRoutesStrategyAll | تلقائي: تعرِض ما يصل إلى مسارات بديلة. |
GMSNavigationAlternateRoutesStrategyOne | تعرِض هذه السمة مسارًا بديلاً واحدًا (إذا كان متاحًا). |
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){...}];