Personaliza las polilíneas de rutas

Selecciona la plataforma: Android iOS JavaScript

Antes de personalizar las polilíneas de ruta (o los marcadores), primero debes inicializar las opciones de personalización de IU.

Inicializa las opciones de personalización de IU

La devolución de llamada recomendada que se usa para establecer inicialmente las opciones de personalización de IU se declara en GMTCMapViewDelegate. La devolución de llamada mapViewDidInitialize se activa cuando el objeto GMTCMapView está listo para renderizar el mapa. Se inicializó el coordinador de estilo, pero no hay elementos de la IU presentes.

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

Personaliza las polilíneas

La personalización de polilíneas se establece con GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:).

En el siguiente ejemplo, se muestra cómo establecer las opciones de estilo de polilínea:

Tipos de polilíneas

Puedes personalizar los siguientes tipos de polilíneas:

  • GMTCPolylineType.activeRoute: Es la ruta que toma el vehículo hasta el siguiente punto del pasajero, ya sea el punto de partida o el de destino.
  • GMTCPolylineType.remainingRoute: Es el segmento del viaje que queda después de que el vehículo completa la GMTCPolylineType.activeRoute.

Ambos tipos se muestran durante un viaje compartido.

Propiedades de polilínea

Las propiedades que puedes personalizar para cada polilínea son un subconjunto de las propiedades proporcionadas en Google Maps PolylineOptions. Las propiedades GMTCPolylineStyleOptions del SDK para el consumidor tienen las siguientes características:

  • Está compilado con un inicializador.
  • Puede ser inmutable o mutable si deseas proporcionar valores personalizados para cualquier propiedad.
  • Tienen valores predeterminados.

Puedes personalizar las siguientes propiedades:

  • color
  • width
  • isVisible: Para inhabilitar una polilínea, establece isVisible en false.
  • isTrafficEnabled: Esta propiedad se establece en false de forma predeterminada.

Ejemplo

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

Polilíneas con información sobre el tráfico

La capa de tráfico de la polilínea está inhabilitada de forma predeterminada. Cuando la habilitas con polylineStyleOptions.isTrafficEnabled = true, los segmentos que representan tramos de tráfico no normal se dibujan como la ruta.

Las condiciones del tráfico se representan como una de las cuatro velocidades:

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

Puedes personalizar el color que representa cada una de esas clasificaciones de velocidad con setTrafficColorFor(_:color:).