Android-UI anpassen

Die ConsumerMapStyle verfügt über Setter- und Getter-Methoden, die eine dynamische Anpassung ermöglichen. für Markierungen und Polylinien. Diese Klasse wird mithilfe der Methode ConsumerController.getConsumerMapStyle() .

Die UI-Anpassung bleibt für alle Gerätedrehungen erhalten und bleibt wirksam, bis das ConsumerController getrennt.

Benutzerdefinierte Markierungen

Die Methode zum Festlegen des Markierungstyps und ihrer Eigenschaften ist ConsumerMapStyle.setMarkerStyleOptions(). Ihr individuelles Markierungsoptionen überschreiben die vom Consumer SDK bereitgestellten Standardwerte. Rufen Sie zum Wiederherstellen der Standardwerte setMarkerStyleOptions() mit null auf. für den Parameter MarkerOptions. Aktive MarkerOptions abrufen mit getMarkerStyleOptions()

Markierungstypen

Die folgenden Markierungen können angepasst werden:

  • TRIP_PICKUP_POINT
  • TRIP_DROPOFF_POINT
  • TRIP_INTERMEDIATE_DESTINATION
  • TRIP_VEHICLE

TRIP_PICKUP_POINT und TRIP_DROPOFF_POINT werden während der Fahrtüberwachung angezeigt.

TRIP_VEHICLE wird während der Fahrtüberwachung angezeigt. Das Markierungssymbol ändert sich nicht. je nach Fahrzeugtyp für die Fahrt. Updates des Consumer SDK Drehung des TRIP_VEHICLE-Symbols während der Fahrtüberwachung, um das des tatsächlichen Fahrzeugs auf der Route.

Markierungsoptionen

Für jede Markierung sind anpassbare Eigenschaften verfügbar, von Google Maps bereitgestellte Unterkünfte MarkerOptions

MarkerOptions wird mit seinem Konstruktor erstellt und die benutzerdefinierten Eigenschaften werden mit „Setter“ angegeben Stilmethoden. Für jede Eigenschaft werden Standardwerte bereitgestellt, sodass Sie nur benutzerdefinierte Werte angeben müssen.

Du kannst eine Markierung deaktivieren, indem du visible auf false setzt. Es sollten so viele Daten zur Verfügung gestellt werden, dass Sie stattdessen ein eigenes UI-Element verwenden können.

Beispiel

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)

Benutzerdefinierte Polylinien

Die Polylinienanpassung wird mit der Methode ConsumerMapStyle.setPolylineStyleOptions festgelegt. Benutzerdefinierte Polylinienoptionen festlegen überschreibt die vom Consumer SDK bereitgestellten Standardwerte. Standardwerte kann durch Aufrufen von setPolylineStyleOptions wiederhergestellt werden. mit Null für den Parameter PolylineOptions. Die aktiven PolylineOptions kann mithilfe der Methode getPolylineStyleOptions-Methode.

Polylinientypen

Die folgenden Polylinientypen können angepasst werden:

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

ACTIVE_ROUTE und REMAINING_ROUTE werden während der Fahrtüberwachung angezeigt und die Route des Fahrzeugs darstellen.

Polylinieneigenschaften

Die anpassbaren Eigenschaften für jede Polylinie werden von Google Maps PolylineOptions bereitgestellt. PolylineOptions wird mit seinem Konstruktor erstellt und die benutzerdefinierten Eigenschaften werden mit „Setter“ angegeben Stilmethoden. Standardwerte werden für jede Eigenschaft bereitgestellt, sodass Sie nur benutzerdefinierte Werte angeben müssen. Du kannst die Polylinie deaktivieren, indem du visible auf false setzt.

Beispiel

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)

Aktive und verbleibende Route

Wenn „Reise und Bestellfortschritt“ aktiviert ist, können Sie in Ihrer App Polylinien verwenden, in denen die aktiven und verbleibenden Fahrzeuge angezeigt werden Route.

Die aktive Route ist der Weg, den das Fahrzeug gerade zurücklegt Wegpunkt auf der aktiven Fahrt des Nutzers. Die verbleibende Route ist die Strecke, die das Fahrzeug über die aktive Route zurücklegt. Wenn die aktive Route Wegpunkt ist der letzte Wegpunkt zur Fahrt; die verbleibende Route existiert nicht.

Aktive und verbleibende Polylinien können angepasst und die Sichtbarkeit eingestellt werden. durch Ihre App. Standardmäßig ist die aktive Route sichtbar und die verbleibende Route. ist nicht sichtbar.

Beispiel

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)

Polylinien mit Verkehrserkennung

Die Verkehrsebene der Polylinie ist standardmäßig deaktiviert. Ist sie aktiviert, werden Segmente Strecken des nicht normalen Verkehrs darstellen, werden über der Polylinie der Route gezeichnet beim Z-Index PolylineOptions.getZIndex() plus einem von der Traffic-Bedingung abhängigen Offset.

Die Verkehrslage wird dargestellt als eine der folgenden vier Geschwindigkeitstypen. Sie können die Farbe für jeden Geschwindigkeitstyp anpassen.

Um die "Traffic-sensitive Polylinien" zu aktivieren, müssen Sie ein TrafficStyle-Objekt konstruieren, das dann durch Aufrufen von setPolylineTrafficStyle() an ConsumerMapStyle übergeben wird.

Beispiel

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)

Den Kamerazoom so anpassen, dass er sich auf eine Reise fokussiert

Die Standardschaltfläche Mein Standort im Maps SDK integriert, wird die Kamera auf den Gerätestandort zentriert. Wenn es eine aktive Fahrt- und Bestellfortschrittssitzung ist, können Sie das fokussiert die Kamera nicht auf den Gerätestandort, sondern auf die Fahrt.

Consumer SDK for Android – integrierte Android-Lösung: AutoCamera

Damit Sie sich auf den Kaufprozess statt auf den Standort des Geräts konzentrieren können, wurde das Consumer SDK stellt eine AutoCamera-Funktion bereit, die standardmäßig aktiviert ist. Die Kamera zoomt , um sich auf die Route für den Fahrt- und Bestellfortschritt sowie den nächsten Wegpunkt zu konzentrieren.

Kameraverhalten anpassen

Wenn Sie das Verhalten der Kamera genauer steuern möchten, können Sie sie deaktivieren oder aktivieren AutoCamera mit ConsumerController.setAutoCameraEnabled()

ConsumerController.getCameraUpdate() gibt die empfohlenen Kameragrenzen zu diesem Zeitpunkt zurück. Sie können Geben Sie dann CameraUpdate als Argument GoogleMap.moveCamera() oder GoogleMap.animateCamera().

Cloudbasiertes Gestalten von Karteninhalten

Sowohl die ConsumerMapView und die ConsumerMapFragment -Klassen unterstützen das cloudbasierte Gestalten von Karteninhalten. Wenn Sie das cloudbasierte Gestalten von Karteninhalten verwenden möchten, müssen die ausgewählten Karten Renderer ist LATEST. Die folgenden Beispiele zeigen, wie Sie cloudbasiertes Gestalten von Karteninhalten.

ConsumerMapView

Wenn Sie das cloudbasierte Gestalten von Karteninhalten in ConsumerMapView verwenden möchten, legen Sie den Parameter mapId-Feld auf GoogleMapOptions und übergeben Sie GoogleMapOptions an getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Beispiel

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

Es gibt zwei Möglichkeiten, das cloudbasierte Gestalten von Karteninhalten zu nutzen: ConsumerMapFragments:

  1. Statisch mit der XML-Datei.
  2. Dynamisch mit newInstance.

Statisch mit XML

Wenn Sie das cloudbasierte Gestalten von Karteninhalten mit dem XML-Code in der ConsumerMapFragment, fügen Sie das XML-Attribut map:mapId mit dem angegebenen Wert mapId Sehen Sie sich folgendes Beispiel an:

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

Dynamisch mit newInstance

So verwenden Sie das cloudbasierte Gestalten von Karteninhalten mit newInstance in ConsumerMapFragment, legen Sie das Feld mapId auf GoogleMapOptions fest und übergeben Sie den GoogleMapOptions bis newInstance. Sehen Sie sich folgendes Beispiel an:

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