使用 iOS 版 Navigation SDK,您可以修改用户体验 来确定应用的内置界面控件和元素 以及您允许哪些手势您还可以修改 Navigation 界面的视觉外观。请参阅 参阅“政策”页面,了解相关准则 。
地图界面控件
Navigation SDK 提供了一些内置界面控件
与 iOS 版 Google 地图应用中的功能类似。您可以
使用 GMSUISettings
类切换这些控件的可见性。
您对此类所做的更改会立即体现在地图上。
罗盘
Navigation SDK 提供了一个罗盘图形,该图形会显示在 ,并且只有在 。仅当镜头的朝向使得罗盘具有 方位不是正北方位(非零方位)。当用户点击 罗盘时,镜头会以动画方式返回方向角为零(即 默认方向),罗盘很快就会消失。
如果导航功能处于启用状态且相机模式 已设为“关注”罗盘仍可见,并且点按罗盘 在倾斜和总览镜头视角之间切换。
默认情况下,罗盘处于停用状态。要启用罗盘,您可以设置
将 GMSUISettings
的 compassButton
属性设置为 true
。但是,您不能
强制始终显示罗盘。
Swift
mapView.settings.compassButton = true
Objective-C
mapView.settings.compassButton = YES;
“我的位置”按钮
“我的位置”按钮仅显示在屏幕右下角
。当用户点击该按钮时,
如果用户所在的位置,相机会以动画方式聚焦于用户的当前位置
是已知状态。您可以通过设置
将 GMSUISettings
的 myLocationButton
属性设置为 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;
地图界面配件
Navigation SDK 提供界面配件, 与在 iOS 版 Google 地图应用程序中找到的功能类似。 您可以调整这些控件的可见性或视觉外观, 具体说明。您在此处所做的更改会在用户 下一趟行程。
导航页眉和页脚
在导航期间,导航标题会显示在屏幕顶部, 导航栏页脚会显示在底部导航标题会显示 路线的下一个转弯的街道名称和方向,以及 下一个转弯的方向。页脚位置会显示估计时间 和到达目的地的距离以及预计到达时间。
您可以切换导航页眉和页脚的可见性 使用以下属性以编程方式设置其颜色:
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 上可供视图的最大可用尺寸,而
必须提供视图所需的高度。
然后,您可以通过调用 setHeaderAccessoryView:
将此视图传递给 mapView
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];
路线列表
您可以在应用中提供分步说明。以下示例 展示了一种可行的方法。这些步骤可能会因您的情况而异 实施。
- 在
GMSNavigator
上的setDestinations
之后启用入口点按钮 (navigator) 已成功完成,并且导航器上的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
中启用红绿灯和停车标志。包含
该功能之后,用户可以显示红绿灯或停止标志
图标,从而提供更好的背景信息,帮助他们更高效、
提供准确的行程信息。
默认情况下,iOS 版 Navigation SDK 中的红绿灯和停车标志处于停用状态。启用
对于此功能,请分别调用每个选项的 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;
有关设置速度计提醒的更多信息,请参阅 配置速度计提醒。
目的地标记
您可以通过设置
GMSUISettings
的 showsDestinationMarkers
属性。以下示例
显示了如何关闭目的地标记
Swift
mapView.settings.showsDestinationMarkers = false
Objective-C
mapView.settings.showsDestinationMarkers = NO;
地图体验功能
借助 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){...}];