Personaliza los marcadores

Selecciona la plataforma: Android iOS JavaScript

La clase ConsumerMapStyle proporciona métodos set y get 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 para consumidores. 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 marcadores:

  • TRIP_PICKUP_POINT: Se muestra mientras se sigue un viaje.
  • TRIP_DROPOFF_POINT: Se muestra mientras se sigue un viaje.
  • TRIP_INTERMEDIATE_DESTINATION

  • TRIP_VEHICLE: Se muestra mientras se sigue un viaje.

    El SDK para consumidores actualiza la rotación del ícono TRIP_VEHICLE durante la supervisión de viajes para imitar el comportamiento del vehículo real a medida que recorre la ruta.

Selecciona las opciones de marcadores

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, usa 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 la IU en su lugar.

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

Ejemplos de personalizaciones 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?