Personalizar polilinhas do trajeto

Selecione a plataforma: Android iOS JavaScript

Antes de personalizar as polilinhas (ou marcadores) de trajeto, você precisa inicializar as opções de personalização da interface.

Inicializar opções de personalização da interface

O callback recomendado usado para definir inicialmente as opções de personalização da interface é declarado no GMTCMapViewDelegate. O mapViewDidInitialize o callback será acionado quando o objeto GMTCMapView estiver pronto para renderizar o mapa. O coordenador de estilo é inicializado, mas não há elementos de interface do usuário.

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

Personalizar polilinhas

A personalização de polilinha é definida usando GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:):

O exemplo a seguir mostra como definir opções de estilo de polilinha:

Tipos de polilinha

Você pode personalizar os seguintes tipos de polilinha:

• GMTCPolylineType.activeRoute: o trajeto que o veículo está até o próximo ponto do passageiro, seja o embarque ou o desembarque.
• GMTCPolylineType.remainingRoute: o trecho da viagem que permanece depois que o veículo concluir a GMTCPolylineType.activeRoute.

Os dois tipos são exibidos em uma jornada compartilhada.

Propriedades da polilinha

As propriedades que você pode personalizar para cada polilinha são um subconjunto da propriedades fornecidas no Google Maps PolylineOptions O SDK do consumidor GMTCPolylineStyleOptions têm as seguintes características:

• Criado usando um inicializador.
• Pode ser imutável ou mutável se você quiser fornecer valores personalizados para qualquer propriedade.
• Têm valores padrão.

Você pode personalizar as seguintes propriedades:

• color
• width
• isVisible: para desativar uma polilinha, defina isVisible como false.
• isTrafficEnabled: essa propriedade é definida como false por padrão.

Exemplo

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];
}

Polilinhas com reconhecimento de tráfego

A camada de trânsito da polilinha fica desativada por padrão. Quando você o ativa usando polylineStyleOptions.isTrafficEnabled = true, os segmentos que representam trechos de tráfego fora do normal são desenhados como o trajeto.

As condições de trânsito são representadas como uma das quatro velocidades:

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

É possível personalizar a cor que representa cada uma dessas classificações de velocidade usando setTrafficColorFor(_:color:).