Personalizza le polilinee del percorso

Seleziona la piattaforma: Android iOS JavaScript

Prima di personalizzare i polilinei (o gli indicatori) del percorso, devi prima inizializzare le opzioni di personalizzazione dell'interfaccia utente.

Inizializzare le opzioni di personalizzazione dell'interfaccia utente

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 eseguire il rendering della mappa. Il coordinatore degli stili è stato 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 del polilinea viene impostata utilizzando GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:).

L'esempio seguente mostra come impostare le opzioni di stile per i polilinee:

Tipi di polilinee

Puoi personalizzare i seguenti tipi di polilinee:

• GMTCPolylineType.activeRoute: il percorso seguito dal veicolo fino al prossimo punto del tragitto del passeggero, che si tratti del punto di partenza o di arrivo.
• GMTCPolylineType.remainingRoute: il tratto del viaggio che rimane dopo che il veicolo ha completato il GMTCPolylineType.activeRoute.

Entrambi i tipi vengono visualizzati durante un percorso condiviso.

Proprietà delle polilinee

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

• Creato utilizzando un'inizializzazione.
• Può essere immutabile o mutabile 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 sensibili al traffico

Il livello di traffico del polilinea è disattivato per impostazione predefinita. Quando lo attivi utilizzando polylineStyleOptions.isTrafficEnabled = true, i tratti di traffico non normale vengono rappresentati come percorso.

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

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

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