با استفاده از Navigation SDK برای iOS، میتوانید تجربه کاربری با نقشه خود را با تعیین اینکه کدام یک از کنترلها و عناصر رابط کاربری داخلی روی نقشه ظاهر میشوند و کدام حرکات را مجاز میکنید، تغییر دهید. همچنین می توانید ظاهر بصری رابط کاربری ناوبری را تغییر دهید. برای دستورالعملهای مربوط به تغییرات قابل قبول در رابط کاربری ناوبری، به صفحه خطمشیها مراجعه کنید.
کنترلهای رابط کاربری نقشه
Navigation SDK برخی از کنترلهای UI داخلی مشابه آنچه در Google Maps برای برنامه iOS یافت میشود، ارائه میکند. با استفاده از کلاس GMSUISettings
میتوانید قابلیت مشاهده این کنترلها را تغییر دهید. تغییراتی که در این کلاس ایجاد میکنید بلافاصله روی نقشه منعکس میشوند.
قطب نما
Navigation SDK یک گرافیک قطب نما را ارائه می دهد که در گوشه سمت راست بالای نقشه تحت شرایط خاص و تنها در صورت فعال بودن ظاهر می شود. قطب نما فقط زمانی ظاهر می شود که دوربین به گونه ای باشد که دارای یک یاتاقان غیر از شمال دقیق (یک یاتاقان غیر صفر) باشد. هنگامی که کاربر روی قطب نما کلیک می کند، دوربین به موقعیتی با یاتاقان صفر (جهت پیش فرض) متحرک می شود و کمی بعد قطب نما محو می شود.
اگر پیمایش فعال باشد و حالت دوربین روی "دنبال کردن" تنظیم شود، قطب نما قابل مشاهده باقی می ماند و ضربه زدن روی قطب نما بین زاویه دید دوربین کج و نمای کلی تغییر می کند.
قطب نما به طور پیش فرض غیرفعال است. میتوانید قطبنما را با تنظیم ویژگی compassButton
در GMSUISettings
روی true
فعال کنید. با این حال، نمی توانید قطب نما را مجبور کنید همیشه نشان داده شود.
سویفت
mapView.settings.compassButton = true
هدف-C
mapView.settings.compassButton = YES;
دکمه موقعیت مکانی من
دکمه موقعیت مکانی من تنها زمانی در گوشه سمت راست پایین صفحه ظاهر می شود که دکمه موقعیت مکانی من فعال باشد. هنگامی که کاربر روی دکمه کلیک می کند، دوربین متحرک می شود تا بر روی مکان فعلی کاربر تمرکز کند، اگر مکان کاربر در حال حاضر مشخص باشد. با تنظیم ویژگی myLocationButton
در GMSUISettings
روی true
میتوانید این دکمه را فعال کنید.
سویفت
mapView.settings.myLocationButton = true
هدف-C
mapView.settings.myLocationButton = YES;
دکمه مرکز جدید
وقتی پیمایش فعال است، وقتی کاربر نمای نقشه را پیمایش میکند، دکمه تازهتر ظاهر میشود و زمانی که کاربر برای مرکز کردن مجدد نقشه ضربه میزند، ناپدید میشود. برای اینکه به دکمه Renter نمایش داده شود، ویژگی recenterButtonEnabled
GMSUISettings
را روی true
تنظیم کنید. برای جلوگیری از ظاهر شدن دکمه Renter، recenterButtonEnabled
روی false
قرار دهید.
سویفت
mapView.settings.isRecenterButtonEnabled = true
هدف-C
mapView.settings.recenterButtonEnabled = YES;
لوازم جانبی رابط کاربری نقشه
Navigation SDK لوازم جانبی UI را ارائه می دهد که در حین پیمایش مشابه موارد موجود در Google Maps برای برنامه 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
هدف-C
mapView.settings.navigationHeaderEnabled = YES;
mapView.settings.navigationFooterEnabled = YES;
mapView.settings.navigationHeaderPrimaryBackgroundColor = [UIColor blueColor];
mapView.settings.navigationHeaderSecondaryBackgroundColor = [UIColor redColor];
نمای سرصفحه لوازم جانبی ناوبری
می توانید برنامه خود را با جایگزین کردن نمای هدر پیمایش ثانویه با نمای لوازم جانبی سفارشی شده خود سفارشی کنید. شما این کار را با ایجاد یک نمای انجام می دهید که پروتکل GMSNavigationAccessoryView
را پیاده سازی می کند. این پروتکل یک روش لازم دارد: -heightForAccessoryViewConstrainedToSize:onMapView:
. حداکثر اندازه موجود برای نمای خود در mapView داده شده به شما داده می شود و باید ارتفاع مورد نیاز نمای خود را ارائه دهید.
سپس میتوانید با فراخوانی setHeaderAccessoryView:
MapView نماهای فعلی را متحرک میکند و سپس در نمای سفارشی شما متحرک میشود. هدر پیمایش باید قابل مشاهده باشد تا نمای سفارشی شما نمایش داده شود.
برای حذف نمای جانبی هدر سفارشی، 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)
هدف-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
به عنوان یک نمای فرعی از کنترلکننده view اضافه کنید. متدهایreloadData
وinvalidateLayout
روی کنترلکننده باید مانندUICollectionView
فراخوانی شوند. - نمایش کنترلر را روی سلسله مراتب نمایش کنترلر برنامه فشار دهید.
مثال کد زیر افزودن یک 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()
})
...
}
هدف-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 فعال کنید.
سویفت
mapView.settings.isNavigationTripProgressBarEnabled = true
هدف-C
mapView.settings.navigationTripProgressBarEnabled = YES;
چراغ های راهنمایی و رانندگی و علائم ایست
میتوانید چراغهای راهنمایی و علائم توقف را در mapView
فعال کنید. با استفاده از این ویژگی، کاربر می تواند نمایش چراغ های راهنمایی یا نمادهای ایست را در مسیر خود فعال کند و زمینه بهتری را برای سفرهای کارآمدتر و دقیق تر فراهم کند.
به طور پیشفرض، چراغهای راهنمایی و علائم توقف در Navigation SDK برای iOS غیرفعال هستند. برای فعال کردن این ویژگی، تنظیمات GMSMapView
را برای هر گزینه به طور مستقل فراخوانی کنید: showsTrafficLights
و showsStopSigns
.
سویفت
mapView.settings.showsTrafficLights = true
mapView.settings.showsStopSigns = true
هدف-C
mapView.settings.showsTrafficLights = YES;
mapView.settings.showsStopSigns = YES;
کنترل سرعت سنج
وقتی پیمایش فعال است و حالت سفر روی رانندگی تنظیم شده است، Navigation SDK برای iOS یک کنترل محدودیت سرعت را در گوشه پایینی نقشه نشان می دهد که محدودیت سرعت فعلی را نشان می دهد. هنگامی که راننده از حد مجاز سرعت فراتر رفت، کنترل برای نمایش سرعت سنج دوم با سرعت فعلی راننده گسترش می یابد.
میتوانید سطوح هشدار را برای تغییر قالببندی نمایشگر سرعتسنج زمانی که راننده به میزان مشخصی از حد مجاز سرعت فراتر میرود، تنظیم کنید. برای مثال، میتوانید مشخص کنید که سرعت فعلی با رنگ متن قرمز زمانی که راننده از حد مجاز سرعت 5 مایل در ساعت فراتر میرود، و با رنگ پسزمینه قرمز زمانی که راننده 10 مایل بر ساعت از حد مجاز تجاوز میکند، با رنگ پسزمینه قرمز نمایش داده شود.
برای نمایش کنترل محدودیت سرعت، ویژگی shouldDisplaySpeedometer
GMSUISettings
را روی true
تنظیم کنید. برای غیرفعال کردن نمایش کنترل محدودیت سرعت، shouldDisplaySpeedometer
روی false
تنظیم کنید.
سویفت
mapView.shouldDisplaySpeedometer = true
هدف-C
mapView.shouldDisplaySpeedometer = YES;
برای اطلاعات بیشتر در مورد تنظیم هشدارها برای سرعت سنج، به پیکربندی هشدارهای سرعت سنج مراجعه کنید.
نشانگرهای مقصد
می توانید با تنظیم ویژگی showsDestinationMarkers
در GMSUISettings
نشانگرهای مقصد را برای یک مسیر مشخص نشان دهید یا پنهان کنید. مثال زیر خاموش کردن نشانگرهای مقصد را نشان می دهد.
سویفت
mapView.settings.showsDestinationMarkers = false
هدف-C
mapView.settings.showsDestinationMarkers = NO;
ویژگی های تجربه نقشه
Navigation SDK این امکان را در اختیار شما قرار می دهد که تجربه ناوبری را برای کاربران خود سفارشی کنید. تغییراتی که در نمونه خود ایجاد میکنید در طول بهروزرسانی بعدی برنامه شما توسط کاربر منعکس میشود.
حرکات پیش فرض نقشه را غیرفعال کنید
میتوانید با تنظیم ویژگیهای کلاس GMSUISettings
، که به عنوان ویژگی GMSMapView
در دسترس است، حرکات پیشفرض روی نقشه را غیرفعال کنید. ژست های زیر را می توان به صورت برنامه ریزی فعال و غیرفعال کرد. توجه داشته باشید که غیرفعال کردن ژست دسترسی برنامهای به تنظیمات دوربین را محدود نمیکند.
-
scrollGestures
- فعال یا غیرفعال بودن حرکات اسکرول را کنترل می کند. در صورت فعال بودن، کاربران میتوانند انگشت خود را برای حرکت به دوربین بکشند. -
zoomGestures
- فعال یا غیرفعال بودن حرکات زوم را کنترل می کند. در صورت فعال بودن، کاربران میتوانند برای بزرگنمایی دوربین، دو بار ضربه بزنند، دو انگشت ضربه بزنند یا نیشگون بگیرند. توجه داشته باشید که وقتیscrollGestures
فعال است، دوبار ضربه زدن یا نیشگون گرفتن آن ممکن است دوربین را تا نقطه مشخص شده حرکت دهد. -
tiltGestures
- فعال یا غیرفعال بودن حرکات شیب را کنترل می کند. اگر فعال باشد، کاربران میتوانند از یک تند کشیدن دو انگشتی عمودی به پایین یا بالا برای کج کردن دوربین استفاده کنند. -
rotateGestures
- فعال یا غیرفعال بودن حرکات چرخشی را کنترل می کند. در صورت فعال بودن، کاربران می توانند از حرکت چرخش دو انگشتی برای چرخاندن دوربین استفاده کنند.
در این مثال، هر دو حرکت حرکت و زوم غیرفعال شده است.
سویفت
mapView.settings.scrollGestures = false
mapView.settings.zoomGestures = false
هدف-C
mapView.settings.scrollGestures = NO;
mapView.settings.zoomGestures = NO;
کنترل های موقعیت و عناصر UI
با استفاده از ویژگی های زیر می توانید کنترل ها و سایر عناصر رابط کاربری را نسبت به موقعیت سرصفحه و پاورقی پیمایش قرار دهید:
-
navigationHeaderLayoutGuide
-
navigationFooterLayoutGuide
مثال کد زیر استفاده از راهنماهای طرح بندی را برای قرار دادن یک جفت برچسب در نمای نقشه نشان می دهد:
سویفت
/* 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
هدف-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 | یک مسیر جایگزین (در صورت وجود) را نشان می دهد. |
GMSNavigationAlternateRoutesStrategy هیچکدام | مسیرهای جایگزین را پنهان می کند. |
مثال
مثال کد زیر نحوه پنهان کردن مسیرهای جایگزین را به طور کلی نشان می دهد.
سویفت
let routingOptions = GMSNavigationRoutingOptions(alternateRoutesStrategy: .none)
navigator?.setDestinations(destinations,
routingOptions: routingOptions) { routeStatus in
...
}
هدف-C
GMSNavigationRoutingOptions *routingOptions = [[GMSNavigationRoutingOptions alloc] initWithAlternateRoutesStrategy:GMSNavigationAlternateRoutesStrategyNone];
[navigator setDestinations:destinations
routingOptions:routingOptions
callback:^(GMSRouteStatus routeStatus){...}];
با استفاده از Navigation SDK برای iOS، میتوانید تجربه کاربری با نقشه خود را با تعیین اینکه کدام یک از کنترلها و عناصر رابط کاربری داخلی روی نقشه ظاهر میشوند و کدام حرکات را مجاز میکنید، تغییر دهید. همچنین می توانید ظاهر بصری رابط کاربری ناوبری را تغییر دهید. برای دستورالعملهای مربوط به تغییرات قابل قبول در رابط کاربری ناوبری، به صفحه خطمشیها مراجعه کنید.
کنترلهای رابط کاربری نقشه
Navigation SDK برخی از کنترلهای UI داخلی مشابه آنچه در Google Maps برای برنامه iOS یافت میشود، ارائه میکند. با استفاده از کلاس GMSUISettings
میتوانید قابلیت مشاهده این کنترلها را تغییر دهید. تغییراتی که در این کلاس ایجاد میکنید بلافاصله روی نقشه منعکس میشوند.
قطب نما
Navigation SDK یک گرافیک قطب نما را ارائه می دهد که در گوشه سمت راست بالای نقشه تحت شرایط خاص و تنها در صورت فعال بودن ظاهر می شود. قطب نما فقط زمانی ظاهر می شود که دوربین به گونه ای باشد که دارای یک یاتاقان غیر از شمال دقیق (یک یاتاقان غیر صفر) باشد. هنگامی که کاربر روی قطب نما کلیک می کند، دوربین به موقعیتی با یاتاقان صفر (جهت پیش فرض) متحرک می شود و کمی بعد قطب نما محو می شود.
اگر پیمایش فعال باشد و حالت دوربین روی "دنبال کردن" تنظیم شود، قطب نما قابل مشاهده باقی می ماند و ضربه زدن روی قطب نما بین زاویه دید دوربین کج و نمای کلی تغییر می کند.
قطب نما به طور پیش فرض غیرفعال است. میتوانید قطبنما را با تنظیم ویژگی compassButton
در GMSUISettings
روی true
فعال کنید. با این حال، نمی توانید قطب نما را مجبور کنید همیشه نشان داده شود.
سویفت
mapView.settings.compassButton = true
هدف-C
mapView.settings.compassButton = YES;
دکمه موقعیت مکانی من
دکمه موقعیت مکانی من تنها زمانی در گوشه سمت راست پایین صفحه ظاهر می شود که دکمه موقعیت مکانی من فعال باشد. هنگامی که کاربر روی دکمه کلیک می کند، دوربین متحرک می شود تا بر روی مکان فعلی کاربر تمرکز کند، اگر مکان کاربر در حال حاضر مشخص باشد. با تنظیم ویژگی myLocationButton
در GMSUISettings
روی true
میتوانید این دکمه را فعال کنید.
سویفت
mapView.settings.myLocationButton = true
هدف-C
mapView.settings.myLocationButton = YES;
دکمه مرکز جدید
وقتی پیمایش فعال است، وقتی کاربر نمای نقشه را پیمایش میکند، دکمه تازهتر ظاهر میشود و زمانی که کاربر برای مرکز کردن مجدد نقشه ضربه میزند، ناپدید میشود. برای اینکه به دکمه Renter نمایش داده شود، ویژگی recenterButtonEnabled
GMSUISettings
را روی true
تنظیم کنید. برای جلوگیری از ظاهر شدن دکمه Renter، recenterButtonEnabled
روی false
قرار دهید.
سویفت
mapView.settings.isRecenterButtonEnabled = true
هدف-C
mapView.settings.recenterButtonEnabled = YES;
لوازم جانبی رابط کاربری نقشه
Navigation SDK لوازم جانبی UI را ارائه می دهد که در حین پیمایش مشابه موارد موجود در Google Maps برای برنامه 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
هدف-C
mapView.settings.navigationHeaderEnabled = YES;
mapView.settings.navigationFooterEnabled = YES;
mapView.settings.navigationHeaderPrimaryBackgroundColor = [UIColor blueColor];
mapView.settings.navigationHeaderSecondaryBackgroundColor = [UIColor redColor];
نمای سرصفحه لوازم جانبی ناوبری
می توانید برنامه خود را با جایگزین کردن نمای هدر پیمایش ثانویه با نمای لوازم جانبی سفارشی شده خود سفارشی کنید. شما این کار را با ایجاد یک نمای انجام می دهید که پروتکل GMSNavigationAccessoryView
را پیاده سازی می کند. این پروتکل یک روش لازم دارد: -heightForAccessoryViewConstrainedToSize:onMapView:
. حداکثر اندازه موجود برای نمای خود در mapView داده شده به شما داده می شود و باید ارتفاع مورد نیاز نمای خود را ارائه دهید.
سپس میتوانید با فراخوانی setHeaderAccessoryView:
MapView نماهای فعلی را متحرک میکند و سپس در نمای سفارشی شما متحرک میشود. هدر پیمایش باید قابل مشاهده باشد تا نمای سفارشی شما نمایش داده شود.
برای حذف نمای جانبی هدر سفارشی، 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)
هدف-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
به عنوان یک نمای فرعی از کنترلکننده view اضافه کنید. متدهایreloadData
وinvalidateLayout
روی کنترلکننده باید مانندUICollectionView
فراخوانی شوند. - نمایش کنترلر را روی سلسله مراتب نمایش کنترلر برنامه فشار دهید.
مثال کد زیر افزودن یک 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()
})
...
}
هدف-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 فعال کنید.
سویفت
mapView.settings.isNavigationTripProgressBarEnabled = true
هدف-C
mapView.settings.navigationTripProgressBarEnabled = YES;
چراغ های راهنمایی و رانندگی و علائم ایست
میتوانید چراغهای راهنمایی و علائم توقف را در mapView
فعال کنید. با استفاده از این ویژگی، کاربر می تواند نمایش چراغ های راهنمایی یا نمادهای ایست را در مسیر خود فعال کند و زمینه بهتری را برای سفرهای کارآمدتر و دقیق تر فراهم کند.
به طور پیشفرض، چراغهای راهنمایی و علائم توقف در Navigation SDK برای iOS غیرفعال هستند. برای فعال کردن این ویژگی، تنظیمات GMSMapView
را برای هر گزینه به طور مستقل فراخوانی کنید: showsTrafficLights
و showsStopSigns
.
سویفت
mapView.settings.showsTrafficLights = true
mapView.settings.showsStopSigns = true
هدف-C
mapView.settings.showsTrafficLights = YES;
mapView.settings.showsStopSigns = YES;
کنترل سرعت سنج
وقتی پیمایش فعال است و حالت سفر روی رانندگی تنظیم شده است، Navigation SDK برای iOS یک کنترل محدودیت سرعت را در گوشه پایینی نقشه نشان می دهد که محدودیت سرعت فعلی را نشان می دهد. هنگامی که راننده از حد مجاز سرعت فراتر رفت، کنترل برای نمایش سرعت سنج دوم با سرعت فعلی راننده گسترش می یابد.
میتوانید سطوح هشدار را برای تغییر قالببندی نمایشگر سرعتسنج زمانی که راننده به میزان مشخصی از حد مجاز سرعت فراتر میرود، تنظیم کنید. برای مثال، میتوانید مشخص کنید که سرعت فعلی با رنگ متن قرمز زمانی که راننده از حد مجاز سرعت 5 مایل در ساعت فراتر میرود، و با رنگ پسزمینه قرمز زمانی که راننده 10 مایل بر ساعت از حد مجاز تجاوز میکند، با رنگ پسزمینه قرمز نمایش داده شود.
برای نمایش کنترل محدودیت سرعت، ویژگی shouldDisplaySpeedometer
GMSUISettings
را روی true
تنظیم کنید. برای غیرفعال کردن نمایش کنترل محدودیت سرعت، shouldDisplaySpeedometer
روی false
تنظیم کنید.
سویفت
mapView.shouldDisplaySpeedometer = true
هدف-C
mapView.shouldDisplaySpeedometer = YES;
برای اطلاعات بیشتر در مورد تنظیم هشدارها برای سرعت سنج، به پیکربندی هشدارهای سرعت سنج مراجعه کنید.
نشانگرهای مقصد
می توانید با تنظیم ویژگی showsDestinationMarkers
در GMSUISettings
نشانگرهای مقصد را برای یک مسیر مشخص نشان دهید یا پنهان کنید. مثال زیر خاموش کردن نشانگرهای مقصد را نشان می دهد.
سویفت
mapView.settings.showsDestinationMarkers = false
هدف-C
mapView.settings.showsDestinationMarkers = NO;
ویژگی های تجربه نقشه
Navigation SDK این امکان را در اختیار شما قرار می دهد که تجربه ناوبری را برای کاربران خود سفارشی کنید. تغییراتی که در نمونه خود ایجاد میکنید در طول بهروزرسانی بعدی برنامه شما توسط کاربر منعکس میشود.
حرکات پیش فرض نقشه را غیرفعال کنید
میتوانید با تنظیم ویژگیهای کلاس GMSUISettings
، که به عنوان ویژگی GMSMapView
در دسترس است، حرکات پیشفرض روی نقشه را غیرفعال کنید. ژست های زیر را می توان به صورت برنامه ریزی فعال و غیرفعال کرد. توجه داشته باشید که غیرفعال کردن ژست دسترسی برنامهای به تنظیمات دوربین را محدود نمیکند.
-
scrollGestures
- فعال یا غیرفعال بودن حرکات اسکرول را کنترل می کند. در صورت فعال بودن، کاربران میتوانند انگشت خود را برای حرکت به دوربین بکشند. -
zoomGestures
- فعال یا غیرفعال بودن حرکات زوم را کنترل می کند. در صورت فعال بودن، کاربران میتوانند برای بزرگنمایی دوربین، دو بار ضربه بزنند، دو انگشت ضربه بزنند یا نیشگون بگیرند. توجه داشته باشید که وقتیscrollGestures
فعال است، دوبار ضربه زدن یا نیشگون گرفتن آن ممکن است دوربین را تا نقطه مشخص شده حرکت دهد. -
tiltGestures
- فعال یا غیرفعال بودن حرکات شیب را کنترل می کند. اگر فعال باشد، کاربران میتوانند از یک تند کشیدن دو انگشتی عمودی به پایین یا بالا برای کج کردن دوربین استفاده کنند. -
rotateGestures
- فعال یا غیرفعال بودن حرکات چرخشی را کنترل می کند. در صورت فعال بودن، کاربران می توانند از حرکت چرخش دو انگشتی برای چرخاندن دوربین استفاده کنند.
در این مثال، هر دو حرکت حرکت و زوم غیرفعال شده است.
سویفت
mapView.settings.scrollGestures = false
mapView.settings.zoomGestures = false
هدف-C
mapView.settings.scrollGestures = NO;
mapView.settings.zoomGestures = NO;
کنترل های موقعیت و عناصر UI
با استفاده از ویژگی های زیر می توانید کنترل ها و سایر عناصر رابط کاربری را نسبت به موقعیت سرصفحه و پاورقی پیمایش قرار دهید:
-
navigationHeaderLayoutGuide
-
navigationFooterLayoutGuide
مثال کد زیر استفاده از راهنماهای طرح بندی را برای قرار دادن یک جفت برچسب در نمای نقشه نشان می دهد:
سویفت
/* 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
هدف-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 | یک مسیر جایگزین (در صورت وجود) را نشان می دهد. |
GMSNavigationAlternateRoutesStrategy هیچکدام | مسیرهای جایگزین را پنهان می کند. |
مثال
مثال کد زیر نحوه پنهان کردن مسیرهای جایگزین را به طور کلی نشان می دهد.
سویفت
let routingOptions = GMSNavigationRoutingOptions(alternateRoutesStrategy: .none)
navigator?.setDestinations(destinations,
routingOptions: routingOptions) { routeStatus in
...
}
هدف-C
GMSNavigationRoutingOptions *routingOptions = [[GMSNavigationRoutingOptions alloc] initWithAlternateRoutesStrategy:GMSNavigationAlternateRoutesStrategyNone];
[navigator setDestinations:destinations
routingOptions:routingOptions
callback:^(GMSRouteStatus routeStatus){...}];