Personalizza le polilinee del percorso

Seleziona la piattaforma: Android iOS JavaScript

Prima di personalizzare le polilinee (o i marcatori) del percorso, devi prima inizializzare le opzioni di personalizzazione della UI.

Inizializza le opzioni di personalizzazione della UI

Il callback consigliato utilizzato per impostare inizialmente le opzioni di personalizzazione dell'interfaccia utente è dichiarato in GMTCMapViewDelegate. Il callback mapViewDidInitialize viene attivato quando l'oggetto GMTCMapView è pronto per il rendering della mappa. Il coordinatore di stile è inizializzato, ma non sono presenti elementi dell'interfaccia utente.

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.
}

Personalizzare le polilinee

La personalizzazione della polilinea viene impostata utilizzando GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:).

L'esempio seguente mostra come impostare le opzioni di stile della polilinea:

Tipi di polilinee

Puoi personalizzare i seguenti tipi di polilinee:

  • GMTCPolylineType.activeRoute: il percorso che il veicolo sta seguendo per raggiungere il punto successivo del passeggero, che sia il punto di partenza o di arrivo.
  • GMTCPolylineType.remainingRoute: il segmento del viaggio che rimane dopo che il veicolo ha completato l'GMTCPolylineType.activeRoute.

Entrambi questi tipi vengono visualizzati durante un viaggio condiviso.

Proprietà della polilinea

Le proprietà che puoi personalizzare per ogni polilinea sono un sottoinsieme delle proprietà fornite su Google Maps PolylineOptions. Le proprietà dell'SDK Consumer GMTCPolylineStyleOptions hanno le seguenti caratteristiche:

  • Creato utilizzando un inizializzatore.
  • Può essere immutabile o modificabile se vuoi fornire valori personalizzati per qualsiasi proprietà.
  • Avere valori predefiniti.

Puoi personalizzare le seguenti proprietà:

  • color
  • width
  • isVisible: per disattivare una polilinea, imposta isVisible su false.
  • isTrafficEnabled: questa proprietà è impostata su false per impostazione predefinita.

Esempio

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.strokeWidth = 8.0
  mutablepolylineStyleOptions.strokeColor = .blue
  mutablepolylineStyleOptions.zIndex = 1000
  mutablepolylineStyleOptions.isGeodesic = 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.strokeWidth = 8.0;
  mutablepolylineStyleOptions.strokeColor = [UIColor blueColor];
  mutablepolylineStyleOptions.zIndex = 1000;
  mutablepolylineStyleOptions.isGeodesic = 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];
}

Polilinee consapevoli del traffico

Il livello del traffico della polilinea è disattivato per impostazione predefinita. Quando lo attivi utilizzando polylineStyleOptions.isTrafficEnabled = true, i segmenti che rappresentano tratti di traffico anomalo vengono disegnati come percorso.

Le condizioni del traffico sono rappresentate da una delle quattro velocità seguenti:

  • GMTSSpeedType.noData
  • GMTSSpeedType.normal
  • GMTSSpeedType.slow
  • GMTSSpeedType.trafficJam

Puoi personalizzare il colore che rappresenta ciascuna di queste classificazioni di velocità utilizzando setTrafficColorFor(_:color:).