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 todas las rotaciones del dispositivo y permanece vigente hasta que se desconecta el objeto ConsumerController.

Personaliza los marcadores

Para configurar el tipo de marcador y sus propiedades, utiliza 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 cuando sigues un viaje.
  • TRIP_DROPOFF_POINT: Se muestra cuando sigues un viaje.
  • TRIP_INTERMEDIATE_DESTINATION

  • TRIP_VEHICLE: Se muestra mientras se sigue un viaje.

    El SDK del consumidor 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 los marcadores

Para personalizar los marcadores de tu app para consumidores, sigue estos pasos:

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

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

Ejemplo 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?