Mit dem Navigation SDK for iOS können Sie die Nutzererfahrung mit Ihrer Karte ändern, indem Sie festlegen, welche der integrierten UI-Steuerelemente und -Elemente auf der Karte erscheinen und welche Touch-Gesten Sie zulassen. Sie können auch das visuelle Erscheinungsbild der Navigations-UI ändern. Auf der Seite „Richtlinien“ finden Sie Informationen zu zulässigen Änderungen an der Navigations-UI.
UI-Steuerelemente für Karten
Das Navigation SDK bietet einige integrierte UI-Steuerelemente, die denen in der Google Maps for iOS-App ähneln. Sie können die Sichtbarkeit dieser Steuerelemente mithilfe der Klasse GMSUISettings
ändern.
Änderungen, die Sie an dieser Klasse vornehmen, sind sofort auf der Karte zu sehen.
Kompass
Das Navigation SDK bietet eine Kompassgrafik, die unter bestimmten Umständen und nur dann oben rechts auf der Karte angezeigt wird, wenn sie aktiviert ist. Der Kompass wird nur dann angezeigt, wenn die Kamera eine andere Lage hat als genau nach Norden ausgerichtet ist (keine Null). Wenn der Nutzer auf den Kompass klickt, wird die Kamera an eine Position mit der Peilung von null (Standardausrichtung) zurückbewegt und der Kompass wird kurz darauf ausgeblendet.
Wenn die Navigation aktiviert und der Kameramodus auf „Folge ich“ eingestellt ist, bleibt der Kompass sichtbar und durch Antippen des Kompasses wird zwischen der geneigten und der Übersichtskamera gewechselt.
Standardmäßig ist der Kompass deaktiviert. Wenn Sie den Kompass aktivieren möchten, setzen Sie die Eigenschaft compassButton
von GMSUISettings
auf YES
. Sie können jedoch nicht erzwingen, dass der Kompass immer angezeigt wird.
Swift
mapView.settings.compassButton = true
Objective-C
mapView.settings.compassButton = YES;
Schaltfläche „Mein Standort“
Die Schaltfläche „Mein Standort“ wird nur dann rechts unten auf dem Bildschirm angezeigt, wenn sie aktiviert ist. Wenn ein Nutzer auf die Schaltfläche klickt, wird die Kamera animiert und fokussiert den aktuellen Standort des Nutzers, sofern dessen Standort aktuell bekannt ist. Du kannst die Schaltfläche aktivieren, indem du das Attribut myLocationButton
von GMSUISettings
auf YES
setzt.
Swift
mapView.settings.myLocationButton = true
Objective-C
mapView.settings.myLocationButton = YES;
Schaltfläche neu zentrieren
Ist die Navigation aktiviert, wird die Schaltfläche „Neu zentrieren“ angezeigt, wenn der Nutzer in der Kartenansicht scrollt. Sie wird ausgeblendet, wenn der Nutzer darauf tippt, um die Karte neu zu zentrieren. Damit die Schaltfläche zum Rezensieren eingeblendet wird, muss die Eigenschaft recenterButtonEnabled
von GMSUISettings
auf YES
gesetzt werden. Wenn Sie nicht möchten, dass die Schaltfläche „Neu zentrieren“ angezeigt wird, legen Sie für recenterButtonEnabled
den Wert NO
fest.
Swift
mapView.settings.isRecenterButtonEnabled = true
Objective-C
mapView.settings.recenterButtonEnabled = YES;
Karten-UI-Zubehör
Das Navigation SDK stellt UI-Zubehör bereit, das während der Navigation ähnlich wie in der Google Maps App für iOS angezeigt wird. Sie können die Sichtbarkeit und visuelle Darstellung dieser Steuerelemente wie in diesem Abschnitt beschrieben anpassen. Hier vorgenommene Änderungen werden bei der nächsten Fahrt des Fahrers übernommen.
Navigationskopf- und -fußzeile
Während der Navigation wird die Navigationsüberschrift oben auf dem Bildschirm und die Navigationsfußzeile unten auf dem Bildschirm angezeigt. Der Navigationsheader zeigt den Straßennamen und die Richtung der nächsten Abzweigung auf der Route sowie die Richtung der folgenden Abzweigung. Die Navigationsfußzeile zeigt die geschätzte Zeit und Entfernung zum Ziel sowie die voraussichtliche Ankunftszeit an.
Mit den folgenden Eigenschaften können Sie die Sichtbarkeit der Kopf- und Fußzeile der Navigationsleiste umschalten und ihre Farben programmatisch festlegen:
navigationHeaderEnabled
: legt fest, ob die Navigationsüberschrift sichtbar ist. Der Standardwert isttrue
.navigationFooterEnabled
: legt fest, ob die Navigationsfußzeile sichtbar ist. Der Standardwert isttrue
.navigationHeaderPrimaryBackgroundColor
: Damit wird die primäre Hintergrundfarbe für den Navigationsheader festgelegt.navigationHeaderSecondaryBackgroundColor
: Damit wird die sekundäre Hintergrundfarbe für den Navigationsheader festgelegt.
Im folgenden Codebeispiel wird gezeigt, wie Sie die Sichtbarkeit der Kopf- und Fußzeile aktivieren und dann navigationHeaderPrimaryBackgroundColor
auf Blau und navigationHeaderSecondaryBackgroundColor
auf Rot setzen.
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];
Kopfzeilenansicht für Navigationszubehör
Sie können Ihre App anpassen, indem Sie die sekundäre Navigationskopfansicht durch Ihre eigene benutzerdefinierte Zubehöransicht ersetzen. Dazu erstellen Sie eine Ansicht, in der das GMSNavigationAccessoryView
-Protokoll implementiert ist. Für dieses Protokoll ist eine Methode erforderlich: -heightForAccessoryViewConstrainedToSize:onMapView:
. Sie haben die maximal verfügbare Größe für Ihre Ansicht in der angegebenen Kartenansicht angegeben und müssen die für die Ansicht erforderliche Höhe angeben.
Diese Ansicht können Sie dann an die Kartenansicht übergeben, indem Sie setHeaderAccessoryView:
aufrufen. Mit der Funktion „mapView“ werden alle aktuellen Ansichten animiert und dann in Ihrer benutzerdefinierten Ansicht animiert. Die Navigationsüberschrift muss sichtbar sein, damit Ihre benutzerdefinierte Ansicht angezeigt werden kann.
Übergeben Sie nil
an setHeaderAccessoryView:
, um die benutzerdefinierte Header-Zubehöransicht zu entfernen
Wenn die Größe der Ansicht jederzeit geändert werden muss, können Sie invalidateLayoutForAccessoryView:
aufrufen und die Ansicht übergeben, deren Größe geändert werden soll.
Beispiel
Das folgende Codebeispiel zeigt eine benutzerdefinierte Ansicht, in der das GMSNavigationAccessoryView
-Protokoll implementiert wird. Diese benutzerdefinierte Ansicht wird dann verwendet, um eine benutzerdefinierte Zubehöransicht für Navigationsheader festzulegen.
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];
Routenliste
Sie können in Ihrer App detaillierte Wegbeschreibungen bereitstellen. Das folgende Beispiel zeigt eine Möglichkeit. Diese Schritte können je nach Implementierung variieren.
- Aktivieren Sie eine Einstiegspunktschaltfläche, nachdem
setDestinations
imGMSNavigator
(Navigation) abgeschlossen undguidanceActive
im Navigator aktiviert wurde. - Wenn ein Nutzer auf die Schaltfläche für den Einstiegspunkt tippt, erstellen Sie einen
GMSNavigationDirectionsListController
(Controller) mit dem Navigator, der derGMSMapView
(mapView
) zugeordnet ist. - Fügen Sie den Controller einer Instanz von
UIViewController
(View-Controller) hinzu und fügen SiedirectionsListView
als Unteransicht des Ansicht-Controllers hinzu. Die MethodenreloadData
undinvalidateLayout
für den Controller sollten wie bei einerUICollectionView
aufgerufen werden. - Übertragen Sie den Ansichts-Controller in die Hierarchie des Ansichts-Controllers.
Das folgende Codebeispiel zeigt, wie ein DirectionsListViewController
hinzugefügt wird.
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];
...
}
...
Fortschrittsanzeige für die Fahrt
Die Fortschrittsanzeige der Fahrt ist ein vertikaler Balken, der zu Beginn der Navigation am rechten unteren Rand der Karte angezeigt wird. Wenn diese Option aktiviert ist, wird eine Übersicht für die gesamte Fahrt zusammen mit dem Ziel des Fahrers und der aktuellen Position angezeigt.
So haben Fahrer die Möglichkeit, bevorstehende Probleme wie den Verkehr schnell vorherzusehen, ohne heranzuzoomen. Bei Bedarf können sie die Fahrt dann neu berechnen. Wenn der Fahrer die Route neu berechnet, wird die Fortschrittsanzeige zurückgesetzt, als ob eine neue Fahrt an diesem Punkt begonnen hätte.
In der Fortschrittsanzeige der Fahrt werden die folgenden Statusanzeigen angezeigt:
Traffic-Status: Der Status des kommenden Traffics.
Aktueller Standort: Der aktuelle Standort des Fahrers auf der Fahrt.
Verstrichene Route: die verstrichene Zeit
Aktivieren Sie die Fortschrittsanzeige der Fahrt, indem Sie die Eigenschaft navigationTripProgressBarEnabled
in den GMSUISettings festlegen.
Swift
mapView.settings.isNavigationTripProgressBarEnabled = true
Objective-C
mapView.settings.navigationTripProgressBarEnabled = YES;
Ampeln und Stoppschilder
Im mapView
kannst du Ampeln und Stoppschilder aktivieren. Mit dieser Funktion kann der Fahrer die Anzeige von Ampeln oder Symbolen für Stoppschilder entlang der Route aktivieren und so einen besseren Kontext für effizientere und präzisere Fahrten bereitstellen.
Standardmäßig sind Ampeln und Stoppschilder im Navigation SDK for iOS deaktiviert. Rufen Sie zum Aktivieren dieser Funktion die GMSMapView
-Einstellungen für jede Option einzeln auf: showsTrafficLights
und showsStopSigns
.
Swift
mapView.settings.showsTrafficLights = YES;
mapView.settings.showsStopSigns = YES;
Objective-C
mapView.settings.showsTrafficLights = true;
mapView.settings.showsStopSigns = true;
Tachosteuerung
Wenn die Navigation aktiviert ist, wird im Navigation SDK for iOS unten auf der Karte ein Steuerelement für die Geschwindigkeitsbegrenzung mit der aktuellen Geschwindigkeitsbegrenzung angezeigt. Wenn der Fahrer die Geschwindigkeit überschreitet, wird der Steuerelement maximiert und es wird ein zweiter Tachometer mit der aktuellen Geschwindigkeit des Fahrers angezeigt.
Sie können Warnstufen festlegen, um die Formatierung der Tachoanzeige zu ändern, wenn der Fahrer die Geschwindigkeitsbegrenzung um einen bestimmten Wert überschreitet. Sie können beispielsweise festlegen, dass die aktuelle Geschwindigkeit in einer roten Textfarbe angezeigt wird, wenn der Fahrer die Geschwindigkeitsbegrenzung um 8 km/h überschreitet, und mit einer roten Hintergrundfarbe, wenn der Fahrer die Geschwindigkeitsbegrenzung um 16 km/h überschreitet.
Wenn die Einstellung für die Geschwindigkeitsbegrenzung angezeigt werden soll, setzen Sie die Eigenschaft shouldDisplaySpeedometer
von GMSUISettings
auf YES
. Wenn Sie die Anzeige der Geschwindigkeitsbegrenzung deaktivieren möchten, setzen Sie shouldDisplaySpeedometer
auf NO
.
Swift
mapView.shouldDisplaySpeedometer = true
Objective-C
mapView.shouldDisplaySpeedometer = YES;
Weitere Informationen zum Einrichten von Benachrichtigungen für den Tachometer finden Sie unter Tachometer-Benachrichtigungen konfigurieren.
Zielmarkierungen
Sie können die Zielmarkierungen für eine bestimmte Route ein- oder ausblenden, indem Sie die Eigenschaft showsDestinationMarkers
auf GMSUISettings
festlegen. Im folgenden Beispiel sehen Sie, wie Zielmarkierungen deaktiviert werden.
Swift
mapView.settings.showsDestinationMarkers = false
Objective-C
mapView.settings.showsDestinationMarkers = NO;
Funktionen in Google Maps
Mit dem Navigation SDK können Sie die Navigation weiter anpassen. Änderungen, die Sie an der Instanz vornehmen, werden beim nächsten Update der Anwendung durch den Treiber übernommen.
Standardgesten für Karten deaktivieren
Sie können die Standardgesten auf der Karte deaktivieren, indem Sie Eigenschaften der GMSUISettings
-Klasse festlegen, die als Eigenschaft der GMSMapView
verfügbar ist.
Die folgenden Gesten können programmgesteuert aktiviert bzw. deaktiviert werden. Durch das Deaktivieren der Geste wird der programmatische Zugriff auf die Kameraeinstellungen nicht eingeschränkt.
scrollGestures
: legt fest, ob Scrollbewegungen aktiviert oder deaktiviert sind. Ist die Geste aktiviert, können Benutzer die Kamera durch eine Wischbewegung schwenken.zoomGestures
: legt fest, ob Zoombewegungen aktiviert oder deaktiviert sind. Wenn diese Option aktiviert ist, können Nutzer zum Zoomen der Kamera doppeltippen, mit zwei Fingern tippen oder die Finger auseinander- und zusammenziehen. WennscrollGestures
aktiviert ist, wird die Kamera durch Doppeltippen oder Zusammenziehen der Finger auf den angegebenen Punkt geschwenkt.tiltGestures
: legt fest, ob Neigebewegungen aktiviert oder deaktiviert sind. Wenn diese Option aktiviert ist, können Nutzer die Kamera neigen, indem sie mit zwei Fingern vertikal nach unten oder oben wischen.rotateGestures
: legt fest, ob Drehbewegungen aktiviert oder deaktiviert sind. Wenn diese Option aktiviert ist, können Nutzer die Kamera mit einer Drehbewegung mit zwei Fingern drehen.
In diesem Beispiel wurden sowohl Schwenk- als auch Zoombewegungen deaktiviert.
Swift
mapView.settings.scrollGestures = false
mapView.settings.zoomGestures = false
Objective-C
mapView.settings.scrollGestures = NO;
mapView.settings.zoomGestures = NO;
Steuerelemente für Position und UI-Elemente
Mit den folgenden Eigenschaften können Sie Steuerelemente und andere UI-Elemente relativ zur Position der Navigationskopf- und -fußzeile positionieren:
navigationHeaderLayoutGuide
navigationFooterLayoutGuide
Im folgenden Codebeispiel wird gezeigt, wie mithilfe der Layoutanleitungen ein Labelpaar in der Kartenansicht positioniert wird:
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;
Alternative Routen ausblenden
Wenn die Benutzeroberfläche mit zu vielen Informationen unübersichtlich wird, können Sie weniger alternative Routen als die Standardrouten (zwei) oder gar keine anzeigen lassen. Sie können diese Option konfigurieren, bevor Sie die Routen abrufen. Dazu konfigurieren Sie GMSNavigationRoutingOptions
und legen einen der folgenden Aufzählungswerte für alternateRoutesStrategy
fest:
Aufzählungswert | Beschreibung |
---|---|
GMSNavigationAlternativeRoutesStrategyAlle | Standard. Zeigt bis zu zwei alternative Routen an. |
GMSNavigationAlternativeRoutesStrategyOne | Zeigt eine alternative Route an (falls verfügbar). |
GMSNavigationAlternateRoutesStrategyNone | Alternative Routen werden ausgeblendet. |
Beispiel
Im folgenden Codebeispiel wird gezeigt, wie alternative Routen vollständig ausgeblendet werden.
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){...}];