Personalización de la IU de Android

La ConsumerMapStyle tiene métodos set y get que te ofrecen una personalización dinámica para marcadores y polilíneas. Esta clase se expone de forma asíncrona mediante la clase ConsumerController.getConsumerMapStyle() .

La personalización de la IU persiste en todas las rotaciones del dispositivo y permanece vigente hasta que ConsumerController está desconectada.

Marcadores personalizados

El método para configurar el tipo de marcador y sus propiedades es ConsumerMapStyle.setMarkerStyleOptions(). Tu configuración personalizada Las opciones de marcadores anulan los valores predeterminados que proporciona el SDK de consumidor. Para restablecer los valores predeterminados, llama a setMarkerStyleOptions() con un valor nulo. para el parámetro MarkerOptions. Recupera los MarkerOptions activos mediante getMarkerStyleOptions()

Tipos de marcadores

Los siguientes marcadores están disponibles para la personalización:

  • TRIP_PICKUP_POINT
  • TRIP_DROPOFF_POINT
  • TRIP_INTERMEDIATE_DESTINATION
  • TRIP_VEHICLE

Se muestran TRIP_PICKUP_POINT y TRIP_DROPOFF_POINT durante la supervisión de viajes.

Se muestra TRIP_VEHICLE durante la supervisión de un viaje. El ícono del marcador no cambia según el tipo de vehículo real para el viaje. El SDK del consumidor se actualiza la rotación del ícono TRIP_VEHICLE durante la supervisión de viajes para imitar el el comportamiento del vehículo en su recorrido por la ruta.

Opciones del marcador

Las propiedades personalizables disponibles para cada marcador son el conjunto de propiedades proporcionadas por Google Maps MarkerOptions

MarkerOptions se compila con su constructor, y las propiedades personalizadas se especifican con "Setter". métodos de estilo. Se proporcionan valores predeterminados para cada propiedad, por lo que solo debes especificar valores personalizados.

Para desactivar un marcador, establece visible en false. Debes proporcionar suficientes datos para que puedas usar tu propio elemento de la IU en su lugar.

Ejemplo

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)

Polilíneas personalizadas

La personalización de polilíneas se establece con el método ConsumerMapStyle.setPolylineStyleOptions. Cómo configurar opciones personalizadas de polilíneas anula los valores predeterminados que proporciona el SDK del consumidor. Los valores predeterminados se puede restablecer llamando a setPolylineStyleOptions con un valor nulo para el parámetro PolylineOptions. Las campañas de generación de PolylineOptions se puede recuperar con el comando getPolylineStyleOptions.

Tipos de polilínea

Los siguientes tipos de polilíneas están disponibles para la personalización:

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

Se muestran ACTIVE_ROUTE y REMAINING_ROUTE durante la supervisión de viajes y Representan la ruta del vehículo.

Propiedades de las polilíneas

Google Maps PolylineOptions proporciona las propiedades personalizables disponibles para cada polilínea. PolylineOptions se compila con su constructor, y las propiedades personalizadas se especifican con "Setter". métodos de estilo. Valores predeterminados se proporcionan para cada propiedad, por lo que solo debes especificar valores personalizados. Para desactivar la polilínea, establece visible en false.

Ejemplo

Java

// Initializing polyline style options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .visible(false));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setPolylineStyleOptions(
      PolylineType.ACTIVE_ROUTE,
      PolylineOptions().visible(false)
    )
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

Ruta activa y restante

Con el Progreso del viaje y el pedido habilitado, tu app puede personalizar la experiencia del usuario con polilíneas que muestran los vehículos activos y restantes ruta.

La ruta activa es el camino por el que el vehículo está viajando en este momento. el próximo punto de referencia en el viaje activo del consumidor. La ruta restante es la ruta que recorrerá el vehículo después de la ruta activa. Cuando la ruta activa El punto de referencia es el último punto de referencia del viaje; la ruta restante no existe.

Las polilíneas activas y restantes se pueden personalizar y controlar la visibilidad de tu app. De forma predeterminada, la ruta activa es visible, y la ruta restante se muestra no es visible.

Ejemplo

Java

// Initializing polyline options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .color(Color.BLUE));
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.REMAINING_ROUTE,
              new PolylineOptions()
                  .color(Color.BLACK)
                  .width(5)
                  .visible(true));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    {
      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.ACTIVE_ROUTE,
        PolylineOptions().color(Color.BLUE)
      )

      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.REMAINING_ROUTE,
        PolylineOptions().color(Color.BLACK).width(5).visible(true)
      )
    }
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)

Polilíneas adaptadas al tráfico

La capa de tráfico de la polilínea está inhabilitada de forma predeterminada. Cuando está habilitado, los segmentos que representan tramos de tráfico no normal se dibujan sobre la polilínea de la ruta en el índice z PolylineOptions.getZIndex() más un desplazamiento según las condiciones del tráfico.

Las condiciones del tráfico se representan cuatro tipos de velocidades. Puedes personalizar el color para cada tipo de velocidad.

Para habilitar las "polilíneas adaptadas al tráfico", debes construir un objeto TrafficStyle que, luego, se pasará a ConsumerMapStyle mediante una llamada a setPolylineTrafficStyle().

Ejemplo

Java

// TrafficStyle is part of the Consumer SDK.
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

Kotlin

// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
    .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)

Cómo ajustar el zoom de la cámara para enfocar un viaje

El botón Mi ubicación predeterminado integrado en el SDK de Maps centra la cámara en la ubicación del dispositivo. Si hay una sesión activa de Progreso del viaje y el pedido, te recomendamos centrar el para que se enfoque en el viaje y no en la ubicación del dispositivo.

Solución integrada del SDK de consumidor para Android: AutoCamera

Para que puedas enfocarte en el recorrido, en lugar de en la ubicación del dispositivo, proporciona una función de Cámara automática habilitada de forma predeterminada. La cámara se acerca. para centrarse en la ruta del Progreso del viaje y el pedido, y en el próximo punto de referencia del viaje.

Cómo personalizar el comportamiento de la cámara

Si necesitas más control del comportamiento de la cámara, puedes inhabilitar o habilitar Cámara automática con ConsumerController.setAutoCameraEnabled().

ConsumerController.getCameraUpdate() muestra los límites de cámara recomendados en ese momento. Puedes Luego, proporciona este CameraUpdate como argumento para GoogleMap.moveCamera() o GoogleMap.animateCamera().

Diseño de mapas basado en Cloud

Tanto el ConsumerMapView y las ConsumerMapFragment clases admiten el diseño de mapas basado en Cloud. Para usar el diseño de mapas basado en Cloud, asegúrate de que los mapas seleccionados El procesador es LATEST. En los siguientes ejemplos se muestra cómo usar diseño de mapas basado en Cloud con tu proyecto.

ConsumerMapView

Para utilizar el diseño de mapas basado en Cloud en ConsumerMapView, configura la mapId en GoogleMapOptions y pasa GoogleMapOptions a getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Ejemplo

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

Hay dos formas de utilizar el diseño de mapas basado en Cloud en ConsumerMapFragments:

  1. De forma estática, con el XML.
  2. De forma dinámica con newInstance

De forma estática con el XML

Para utilizar el diseño de mapas basado en Cloud con el XML en el archivo ConsumerMapFragment, agrega el atributo XML map:mapId con el valor especificado mapId Consulta el siguiente ejemplo:

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

De forma dinámica con newInstance

Para utilizar el diseño de mapas basado en Cloud con newInstance en ConsumerMapFragment, configura el campo mapId en GoogleMapOptions y pasa el GoogleMapOptions a newInstance. Consulta el siguiente ejemplo:

Java

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

Kotlin

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}