Personalizza le polilinee del percorso

Seleziona la piattaforma: Android iOS JavaScript

Prima di personalizzare le polilinee (o gli indicatori) del percorso, è necessario inizializzare le opzioni di personalizzazione della UI.

Inizializza le opzioni di personalizzazione dell'interfaccia utente

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

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

Personalizza le polilinee

La personalizzazione delle poliline viene impostata utilizzando GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:).

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

Tipi di polilinea

Puoi personalizzare i seguenti tipi di polilinee:

• GMTCPolylineType.activeRoute: il percorso seguito dal veicolo per il punto successivo del passeggero, che si tratti di ritiro o consegna.
• GMTCPolylineType.remainingRoute: il tratto del viaggio rimanente dopo che il veicolo ha completato GMTCPolylineType.activeRoute.

Entrambi questi tipi vengono visualizzati durante un percorso condiviso.

Proprietà polilinea

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

• Creata mediante un inizializzatore.
• Può essere immutabile o modificabile se vuoi fornire valori personalizzati per qualsiasi proprietà.
• Hanno 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 della polilinea è disattivato per impostazione predefinita. Quando lo abiliti utilizzando polylineStyleOptions.isTrafficEnabled = true, i segmenti che rappresentano come tratti di traffico non normale.

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

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

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