Dostosowanie interfejsu iOS

Za pomocą pakietu Consumer SDK możesz stosować znaczniki niestandardowe i kierować linie łamane do projektu aplikacji. Dzięki nim aplikacja konsumenta może wyświetlić dynamiczny podgląd trasy pojazdu.

W tym przewodniku opisujemy opcje dostępne we właściwości consumerMapStyleCoordinator przez pakiet SDK. Ta właściwość jest dostępna przez klasę GMTCMapView. Obejmuje on tylko elementy interfejsu i zakłada, że masz funkcjonalną aplikację konsumenta. Informacje o konfigurowaniu usług backendu, których potrzebuje pakiet SDK Consumer SDK, znajdziesz w artykule o pierwszych krokach z Fleet Engine.

Inicjuję opcje dostosowania interfejsu

Zalecane wywołanie zwrotne używane do początkowego ustawiania opcji dostosowania interfejsu użytkownika jest zadeklarowane w GMTCMapViewDelegate. Wywołanie zwrotne mapViewDidInitialize jest aktywowane, gdy obiekt GMTCMapView jest gotowy do renderowania mapy. Koordynator stylu został zainicjowany, ale nie występują żadne elementy interfejsu.

Swift

/** ViewController.swift */

class ViewController: UIViewController, GMTCMapViewDelegate {

  // MARK: - GMTCMapViewDelegate

  func mapViewDidInitialize(_ mapview: GMTCMapView) {
    // Set the UI customization options here.
  }
}

Objective-C

/** ViewController.m */

@interface ViewController () <GMTCMapViewDelegate>

#pragma mark GMTCMapViewDelegate

- (void)mapViewDidInitialize:(GMTCMapView *)mapview {
  // Set the UI customization options here.
}

Znaczniki niestandardowe

W przykładzie poniżej używasz interfejsu GMTCMapView do dostosowywania stylów znaczników. Aby ustawić typ i właściwości znacznika, użyj funkcji setMarkerStyleOptions(_:markerType:). Opcje znaczników niestandardowych zastępują wartości domyślne w pakiecie SDK klienta.

Swift

/** ViewController.swift */

private func changeMarkerStyle(
  markerStyleOptions: GMTCMarkerStyleOptions?,
  markerType: GMTCCustomizableMarkerType
) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator
  styleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: markerType)
}

/** To restore the default values, call setMarkerStyleOptions(_:markerType:) using nil for the GMTCMarkerStyleOptions parameter.
Here is an example of retrieving the active GMTCMarkerStyleOptions. */

private func retrieveMarkerStyle(markerType: GMTCCustomizableMarkerType) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator

  // The 'markerStyleOptions' contains the stored style options for this marker type.
  let markerStyleOptions = styleCoordinator.markerStyleOptions(for: markerType)
}

Objective-C

/** ViewController.h */

- (void)changeMarkerStyle:(nullable GMTCMarkerStyleOptions *)markerStyleOptions
               markerType:(GMTCCustomizableMarkerType)markerType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
  [styleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:markerType];
}

/** To restore the default values, call setMarkerStyleOptions:markerStyleOptions:markerType: using nil for the GMTCMarkerStyleOptions parameter.
Here is an example of retrieving the active GMTCMarkerStyleOptions. */

- (void)retrieveMarkerStyle:(GMTCCustomizableMarkerType)markerType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;

  // The 'markerStyleOptions' contains the stored style options for this marker type.
  GMTCMarkerStyleOptions *markerStyleOptions = [styleCoordinator markerStyleOptionsForType:markerType];
}

Typy znaczników

Dostępne są następujące znaczniki:

• GMTCCustomizableMarkerType.unknown
• GMTCCustomizableMarkerType.tripPickupPoint
• GMTCCustomizableMarkerType.tripDropoffPoint
• GMTCCustomizableMarkerType.tripVehicle
• GMTCCustomizableMarkerType.intermediateDestination

Użyj GMTCCustomizableMarkerType.tripPickupPoint, GMTCCustomizableMarkerType.intermediateDestination i GMTCCustomizableMarkerType.tripDropoffPoint, by dostosować punkty na trasie w trakcie podróży i zamówienia.

Użyj aplikacji GMTCCustomizableMarkerType.tripVehicle, aby dostosować ikonę pojazdu w trakcie podróży i realizacji zamówienia. Ikona znacznika nie zmienia się w zależności od rzeczywistego typu pojazdu na trasie.

Opcje znacznika

Niestandardowe właściwości dostępne dla każdego znacznika są podzbiorem właściwości dostępnych w Mapach Google MarkerOptions. Pakiet SDK klienta GMTCMarkerStyleOptions opiera się na inicjatorze, a po utworzeniu jest niezmienny. Dla każdej usługi są podawane wartości domyślne, więc wystarczy podać wartości niestandardowe.

Możesz dostosować te właściwości:

• groundAnchor
• isVisible
• iconView
• icon
• zIndex
• isFlat

Ustawienie dla zasady isVisible wartości Fałsz jest równoważne z wyłączeniem znacznika. Należy dostarczyć wystarczającą ilość danych, aby można było zamiast niego użyć własnego elementu interfejsu.

Przykład

Swift

/** MapViewController.swift */

private func updateMarkerUIOptions() {
  // Get the GMTCConsumerMapStyleCoordinator
  let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator

  // The marker type that you would like to set custom UI options for.
  let customizableMarkerType = GMTCCustomizableMarkerType.tripVehicle

  // Initializing marker options.
  let markerStyleOptions = GMTCMutableMarkerStyleOptions()
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor
  markerStyleOptions.icon = icon
  markerStyleOptions.zIndex = 100
  markerStyleOptions.isFlat = false
  markerStyleOptions.isVisible = true

  consumerMapStyleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: customizableMarkerType)

  // Reset marker options to default values.
  consumerMapStyleCoordinator.setMarkerStyleOptions(nil, markerType: customizableMarkerType)
}

Objective-C

/** MapViewController.m */

- (void)updateMarkerUIOptions {
  // Get the GMTCConsumerMapStyleCoordinator
  GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];

  // The marker type that you would like to set custom UI options for.
  GMTCCustomizableMarkerType customizableMarkerType = GMTCCustomizableMarkerTypeTripVehicle;

  // Initializing marker options.
  GMTCMutableMarkerStyleOptions *markerStyleOptions =
      [[GMTCMutableMarkerStyleOptions alloc] init];
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor;
  markerStyleOptions.icon = icon;
  markerStyleOptions.zIndex = 100;
  markerStyleOptions.isFlat = NO;
  markerStyleOptions.isVisible = YES;

  [consumerMapStyleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:customizableMarkerType];

  // Reset marker options to default values.
  [consumerMapStyleCoordinator setMarkerStyleOptions:nil markerType:customizableMarkerType];
}

Dynamiczne aktualizacje szacowanego czasu dotarcia na miejsce w przypadku znaczników odbioru

Aby utworzyć znacznik odbioru, który będzie okresowo dynamicznie wyświetlać zaktualizowany szacowany czas dotarcia na miejsce, zaktualizuj opcje stylu znaczników w: GMTCCustomizableMarkerType.tripPickupPoint.

Przykład

Swift

/** MapViewController.swift */

/// Updates the ETA every minute by creating a Timer that repeats every minute.
private func schedulePickupMarkerStyleUpdates() {
  Timer.scheduledTimer(
    timeInterval: 60.0,  // Update marker ETA every minute.
    target: self,
    selector: #selector(updatePickupMarkerETA),
    userInfo: nil,
    repeats: true)
}

/// Updates the marker options for GMTCCustomizableMarkerType.tripPickupPoint for the current time.
@objc private func updatePickupMarkerETA() {
  let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator
  let previousOptions = consumerMapStyleCoordinator.markerStyleOptions(for: .tripPickupPoint)

  // Get updated ETA icon.
  let updatedETAIcon = pickupIconForCurrentTime()

  let markerStyleOptions = GMTCMutableMarkerStyleOptions()
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor
  markerStyleOptions.icon = updatedETAIcon
  markerStyleOptions.zIndex = 100
  markerStyleOptions.isFlat = false
  markerStyleOptions.isVisible = true

  consumerMapStyleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: .tripPickupPoint)
}

Objective-C

/** MapViewController.m */

/** Updates the ETA every minute by creating an NSTimer that repeats every minute. */
- (void)schedulePickupMarkerStyleUpdates {
  [NSTimer scheduledTimerWithTimeInterval:60.0 // Update marker ETA every minute.
                                   target:self
                                 selector:@selector(updatePickupMarkerETA)
                                 userInfo:nil
                                  repeats:YES];
}

/** Updates the marker options for GMTCCustomizableMarkerTypeTripPickupPoint for the current time. */
- (void)updatePickupMarkerETA {
  GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];
  GMTCMarkerStyleOptions *previousOptions = [consumerMapStyleCoordinator markerStyleOptionsForType:GMTCCustomizableMarkerTypeTripPickupPoint];

  // Get updated ETA icon.
  UIImage *updatedETAIcon = [self pickupIconForCurrentTime];

  GMTCMutableMarkerStyleOptions *markerStyleOptions =
                               [[GMTCMutableMarkerStyleOptions alloc] init];
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor;
  markerStyleOptions.icon = updatedETAIcon;
  markerStyleOptions.zIndex = 100;
  markerStyleOptions.isFlat = NO;
  markerStyleOptions.isVisible = YES;

  [consumerMapStyleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:GMTCCustomizableMarkerTypeTripPickupPoint];
}

Niestandardowe linie łamane

Dostosowanie linii łamanej jest ustawiane za pomocą parametru GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:).

Z przykładu poniżej dowiesz się, jak ustawić opcje stylu linii łamanej:

Swift

/** ViewController.swift */

private func changePolylineStyleOptions(
  polylineStyleOptions: GMTCPolylineStyleOptions?,
  polylineType: GMTCPolylineType
) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator
  styleCoordinator.setPolylineStyleOptions(polylineStyleOptions, polylineType: polylineType)
}

/* Setting custom polyline options will override the default values provided by the Consumer SDK.
The default values can be restored by calling setPolylineStyleOptions(_:polylineType:) with nil for the GMTCPolylineStyleOptions.
The active GMTCPolylineStyleOptions can be retrieved via */

private func retrievePolylineStyleOptions(for polylineType: GMTCPolylineType) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator

  // The 'polylineStyleOptions' contains the stored style options for this polyline type.
  let polylineStyleOptions = styleCoordinator.polylineStyleOptions(for: polylineType)
}

Objective-C

/** ViewController.h */

- (void)changePolylineStyleOptions:(nullable GMTCPolylineStyleOptions *)polylineStyleOptions
                      polylineType:(GMTCPolylineType)polylineType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
  [styleCoordinator setPolylineStyleOptions:polylineStyleOptions polylineType:polylineType];
}

/* Setting custom polyline options will override the default values provided by the Consumer SDK.
The default values can be restored by calling setPolylineStyleOptions:polylineType: with nil for the GMTCPolylineStyleOptions.
The active GMTCPolylineStyleOptions can be retrieved via */

- (void)retrievePolylineStyleOptionsForType:(GMTCPolylineType)polylineType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;

  // The 'polylineStyleOptions' contains the stored style options for this polyline type.
  GMTCPolylineStyleOptions *polylineStyleOptions = [styleCoordinator polylineStyleOptionsForType:polylineType];
}

Typy linii łamanych

Dostępne są następujące typy linii łamanych:

• GMTCPolylineType.activeRoute
• GMTCPolylineType.remainingRoute

Nazwy GMTCPolylineType.activeRoute i GMTCPolylineType.remainingRoute wyświetlają się w oknie postępu podróży i zamówienia. GMTCPolylineType.activeRoute to trasa, którą pojazd dojeżdża do następnego punktu pasażera, niezależnie od tego, czy jest to odbiór czy zwrot. GMTCPolylineType.remainingRoute to segment podróży, który pozostaje po zakończeniu GMTCPolylineType.activeRoute.

Właściwości linii łamanej

Niestandardowe właściwości dostępne dla każdej linii łamanej są podzbiorem właściwości dostępnych w Mapach Google PolylineOptions. Pakiety GMTCPolylineStyleOptions pakietu Consumer SDK są tworzone za pomocą inicjatora. Mogą one być stałe lub zmienne, jeśli chcesz podawać niestandardowe wartości dla dowolnej usługi. Dla każdej usługi podane są wartości domyślne.

Możesz dostosować te właściwości:

• color
• width
• isVisible
• isTrafficEnabled

Ustawienie dla elementu isVisible wartości false jest równoważne wyłączeniu linii łamanej. Domyślnie isTrafficEnabled ma wartość false.

Przykład

Swift

/** MapViewController.swift */

private func updatePolylineUIOptions() {
  // Get the GMTCConsumerMapStyleCoordinator
  let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator

  // The polyline type that you would like to set custom UI options for.
  let customizablePolylineType = GMTCPolylineType.activeRoute

  // Initializing polyline options with default values (immutable version).
  let polylineStyleOptions = GMTCPolylineStyleOptions()
  consumerMapStyleCoordinator.setPolylineStyleOptions(
    polylineStyleOptions, polylineType: customizablePolylineType)

  // Initializing polyline options with custom values (mutable version).
  let mutablePolylineStyleOptions = GMTCMutablePolylineStyleOptions()
  mutablePolylineStyleOptions.isVisible = true
  mutablePolylineStyleOptions.isTrafficEnabled = true
  mutablePolylineStyleOptions.setTrafficColorFor(.slow, color: .yellow)
  mutablePolylineStyleOptions.setTrafficColorFor(.trafficJam, color: .purple)
  consumerMapStyleCoordinator.setPolylineStyleOptions(
    mutablePolylineStyleOptions, polylineType: customizablePolylineType)

  // Reset polyline options to default values.
  consumerMapStyleCoordinator.setPolylineStyleOptions(
    nil, polylineType: customizablePolylineType)
}

Objective-C

/** MapViewController.m */

- (void)updatePolylineUIOptions {
  // Get the GMTCConsumerMapStyleCoordinator
  GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];

  // The polyline type that you would like to set custom UI options for.
  GMTCPolylineType customizablePolylineType = GMTCPolylineTypeActiveRoute;

  // Initializing polyline options with default values (immutable version).
  GMTCPolylineStyleOptions *polylineStyleOptions = [[GMTCPolylineStyleOptions alloc] init];
  [consumerMapStyleCoordinator setPolylineStyleOptions:polylineStyleOptions
                                          polylineType:customizablePolylineType];

  // Initializing polyline options with custom values (mutable version).
  GMTCMutablePolylineStyleOptions *mutablePolylineStyleOptions = [[GMTCMutablePolylineStyleOptions alloc] init];
  mutablePolylineStyleOptions.isVisible = YES;
  mutablePolylineStyleOptions.isTrafficEnabled = YES;
  [mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeSlow color:[UIColor yellowColor]];
  [mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeTrafficJam color:[UIColor purpleColor]];
  [consumerMapStyleCoordinator setPolylineStyleOptions:mutablePolylineStyleOptions
                                          polylineType:customizablePolylineType];

  // Reset polyline options to default values.
  [consumerMapStyleCoordinator setPolylineStyleOptions:nil
                                          polylineType:customizablePolylineType];
}

Linie łamane uwzględniające ruch

Warstwa ruchu linii łamanej jest domyślnie wyłączona. Gdy włączona jest funkcja polylineStyleOptions.isTrafficEnabled = true, trasy są rysowane jako odcinki reprezentujące nietypowy ruch.

Warunki na drodze są przedstawione za pomocą jednej z 4 prędkości: GMTSSpeedType.noData, GMTSSpeedType.normal, GMTSSpeedType.slow i GMTSSpeedType.trafficJam. Kolor reprezentujący każdą z tych klasyfikacji szybkości można dostosować za pomocą właściwości setTrafficColorFor(_:color:).