Personnalisation de l'interface utilisateur Android

ConsumerMapStyle dispose de méthodes setter et getter qui vous offrent une personnalisation dynamique. pour les repères et les polylignes. Cette classe est exposée de manière asynchrone à l'aide de la méthode ConsumerController.getConsumerMapStyle() .

La personnalisation de l'interface utilisateur persiste entre les rotations d'appareil et reste effective jusqu'à ConsumerController est détachée.

Repères personnalisés

La méthode permettant de définir le type de repère et ses propriétés est ConsumerMapStyle.setMarkerStyleOptions(). Votre Les options des repères remplacent les valeurs par défaut fournies par le SDK grand public. Pour restaurer les valeurs par défaut, appelez setMarkerStyleOptions() avec la valeur "null" pour le paramètre MarkerOptions. Récupérer l'élément MarkerOptions actif avec getMarkerStyleOptions()

Types de repères

Vous pouvez personnaliser les repères suivants:

  • TRIP_PICKUP_POINT
  • TRIP_DROPOFF_POINT
  • TRIP_INTERMEDIATE_DESTINATION
  • TRIP_VEHICLE

TRIP_PICKUP_POINT et TRIP_DROPOFF_POINT s'affichent pendant la surveillance des trajets.

TRIP_VEHICLE s'affiche pendant la surveillance des trajets. L'icône du repère ne change pas. en fonction du type de véhicule réel pour le trajet. Mises à jour du SDK grand public la rotation de l'icône TRIP_VEHICLE lors de la surveillance du trajet pour imiter la le comportement du véhicule sur l'itinéraire.

Options de repère

Les propriétés personnalisables disponibles pour chaque repère sont l'ensemble des établissements fournis par Google Maps MarkerOptions

MarkerOptions est créé à l'aide de son constructeur, et les propriétés personnalisées sont spécifiées à l'aide de la méthode "Setter". méthodes de style graphique. Des valeurs par défaut sont fournies pour chaque propriété. Il vous suffit donc de spécifier des valeurs personnalisées.

Vous pouvez désactiver un repère en définissant visible sur false. Vous devez fournir suffisamment de données pour vous permettre d'utiliser votre propre élément d'interface utilisateur à la place.

Exemple

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)

Polylignes personnalisées

La personnalisation des polylignes est définie à l'aide de la méthode ConsumerMapStyle.setPolylineStyleOptions. Définir des options de polyligne personnalisées remplace les valeurs par défaut fournies par le SDK grand public. Les valeurs par défaut peuvent être restaurées en appelant setPolylineStyleOptions avec la valeur "null" pour le paramètre PolylineOptions. L'état actif PolylineOptions peut être récupérée à l'aide de getPolylineStyleOptions.

Types de polylignes

Les types de polylignes suivants peuvent être personnalisés:

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

ACTIVE_ROUTE et REMAINING_ROUTE s'affichent pendant la surveillance des trajets et qui représentent l'itinéraire du véhicule.

Propriétés des polylignes

Les propriétés personnalisables disponibles pour chaque polyligne sont fournies par Google Maps PolylineOptions. PolylineOptions est créé à l'aide de son constructeur, et les propriétés personnalisées sont spécifiées à l'aide de la méthode "Setter". méthodes de style graphique. Valeurs par défaut sont fournies pour chaque propriété. Il vous suffit donc de spécifier des valeurs personnalisées. Vous pouvez désactiver la polyligne en définissant visible sur false.

Exemple

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)

Itinéraire actif et restant

Lorsque la progression du trajet et de la commande est activée, votre application peut personnaliser les l'expérience utilisateur à l'aide de polylignes montrant vos véhicules actifs et restants ; via un routage réseau.

L'itinéraire actif correspond au chemin que le véhicule doit parcourir pour atteindre le prochain point de cheminement dans le trajet actif du client. L'itinéraire restant est le parcours que le véhicule empruntera après l'itinéraire actif. Lorsque la route active point de cheminement est le dernier point de cheminement du trajet, l'itinéraire restant n'existe pas.

Vous pouvez personnaliser les polylignes actives et restantes, et contrôler la visibilité par votre application. Par défaut, la route active est visible et la route restante n'est pas visible.

Exemple

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)

Polylignes tenant compte du trafic

Le calque de trafic de la polyligne est désactivé par défaut. Lorsqu'il est activé, les segments représentant des portions de trafic anormal sont tracées au-dessus de la polyligne de l'itinéraire. au niveau du z-index PolylineOptions.getZIndex(), plus un décalage en fonction des conditions du trafic.

Les conditions de circulation sont représentées par l'une des quatre types de vitesse. Vous pouvez personnaliser la couleur pour chaque type de vitesse.

Pour activer les polylignes basées sur le trafic, vous devez construire un objet TrafficStyle qui sera ensuite transmis à ConsumerMapStyle en appelant setPolylineTrafficStyle().

Exemple

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)

Réglage du zoom de l'appareil photo pour faire la mise au point sur un trajet

Le bouton "Ma position" par défaut intégrée au SDK Maps centre l'appareil photo sur la position de l'appareil. S'il y a une session active de trajet et de progression de la commande, vous pouvez centrer de se concentrer sur le trajet plutôt que sur la position de l'appareil.

Solution intégrée au SDK grand public pour Android: AutoCamera

Pour vous permettre de vous concentrer sur le parcours plutôt que sur la localisation de l'appareil, le SDK grand public propose une fonctionnalité AutoCamera activée par défaut. La caméra zoome pour vous concentrer sur l'itinéraire de progression du trajet et de la commande, ainsi que sur le point de cheminement du prochain trajet.

Personnaliser le comportement de l'appareil photo

Si vous avez besoin de mieux contrôler le comportement de la caméra, vous pouvez activer ou désactiver Appareil photo automatique avec ConsumerController.setAutoCameraEnabled().

ConsumerController.getCameraUpdate() renvoie les limites recommandées pour l'appareil photo à ce moment précis. Vous pouvez puis fournissez ce CameraUpdate comme argument pour GoogleMap.moveCamera() ou GoogleMap.animateCamera().

Styles de cartes basés dans le cloud

Les ConsumerMapView et ConsumerMapFragment sont compatibles avec les styles de cartes basés dans le cloud. Pour utiliser les styles de cartes basés dans le cloud, assurez-vous que les cartes sélectionnées est LATEST. Les exemples suivants montrent comment utiliser des styles de cartes basés dans le cloud pour votre projet.

ConsumerMapView

Pour utiliser les styles de cartes basés dans le cloud dans ConsumerMapView, définissez mapId sur GoogleMapOptions et transmettez GoogleMapOptions à getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Exemple

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

Il existe deux façons d'utiliser les styles de cartes basés dans le cloud ConsumerMapFragments:

  1. Statiquement avec le XML.
  2. Dynamiquement avec newInstance.

De manière statique avec le code XML

Pour utiliser les styles de cartes basés dans le cloud avec le code XML dans la ConsumerMapFragment, ajoutez l'attribut XML map:mapId avec l'attribut mapId Consultez l'exemple ci-dessous :

<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"/>

Dynamiquement avec newInstance

Pour utiliser les styles de cartes basés dans le cloud avec newInstance dans ConsumerMapFragment, définissez le champ mapId sur GoogleMapOptions et transmettez la GoogleMapOptions à newInstance. Consultez l'exemple ci-dessous :

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