Personaliza los marcadores

Selecciona la plataforma: Android iOS JavaScript

La clase ConsumerMapStyle proporciona métodos de configuración y recuperación con personalización dinámica para marcadores y polilíneas. Expones esta clase de forma asíncrona con el método ConsumerController.getConsumerMapStyle().

La personalización de la IU persiste en las rotaciones del dispositivo y permanece vigente hasta que desconectes el ConsumerController.

Personaliza los marcadores

Para establecer el tipo de marcador y sus propiedades, usa el método ConsumerMapStyle.setMarkerStyleOptions(). Tus opciones de marcadores personalizados anulan los valores predeterminados que proporciona el SDK de Consumer. Para restablecer los valores predeterminados, llama a setMarkerStyleOptions() con null para el parámetro MarkerOptions. Recupera el MarkerOptions activo con getMarkerStyleOptions().

Selecciona un tipo de marcador

Puedes usar y personalizar los siguientes íconos de marcador:

  • TRIP_PICKUP_POINT: Se muestra mientras sigues un viaje.
  • TRIP_DROPOFF_POINT: Se muestra mientras sigues un viaje.
  • TRIP_INTERMEDIATE_DESTINATION

  • TRIP_VEHICLE: Se muestra mientras sigues un viaje.

    El SDK de Consumer actualiza la rotación del ícono de TRIP_VEHICLE durante la supervisión del viaje para imitar el comportamiento del vehículo real mientras recorre la ruta.

Selecciona las opciones de marcador

Sigue estos pasos para personalizar los marcadores de tu app para consumidores:

  1. Usa las propiedades de cada marcador que proporciona MarkerOptions de Google Maps.

  2. Compila MarkerOptions con su constructor.

  3. Especifica propiedades personalizadas con métodos de estilo "Setter".

  4. Si lo prefieres, puedes usar tu propio elemento de IU imitando los patrones que proporciona el constructor MarkerOptions.

  5. Para desactivar un marcador, establece la propiedad visible en false. Luego, puedes usar tu propio elemento de IU en su lugar.

Para obtener más información, consulta MarkerOptions de Google Maps.

Ejemplos de personalización de marcadores

Java

// Initializing marker options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setMarkerStyleOptions(
              MarkerType.TRIP_VEHICLE,
              new MarkerOptions()
                  .visible(false));
        });

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);

Kotlin

// Initializing marker options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
  })

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)

¿Qué sigue?