Karte gestalten

In diesem Dokument erfahren Sie, wie Sie das Erscheinungsbild einer Karte anpassen und die Sichtbarkeit von Daten sowie die Ansichtsoptionen steuern. Sie haben dazu folgende Möglichkeiten:

  • Cloudbasiertes Gestalten von Karteninhalten verwenden
  • Kartenstiloptionen direkt im eigenen Code festlegen

Karte mit cloudbasiertem Gestalten von Karteninhalten stylen

Mit dem cloudbasierten Gestalten von Karteninhalten können Sie das Erscheinungsbild der Kartenkomponente anpassen. Sie können Kartenstile in der Google Cloud Console für alle Ihre Apps erstellen und bearbeiten, in denen Google Maps verwendet wird. Dazu sind keine Änderungen am Code erforderlich. Weitere Informationen finden Sie unter Cloudbasiertes Gestalten von Karteninhalten.

Sowohl die Klasse ConsumerMapView als auch die Klasse ConsumerMapFragment unterstützen das cloudbasierte Gestalten von Karteninhalten. Damit Sie das cloudbasierte Gestalten von Karteninhalten verwenden können, muss LATEST als Renderer ausgewählt sein. In den folgenden Abschnitten finden Sie Beispiele für die Verwendung von cloudbasiertem Karten-Styling in Ihrem Projekt.

ConsumerMapView

Wenn du in der ConsumerMapView cloudbasierte Kartenstile verwenden möchtest, setze das Feld mapId auf GoogleMapOptions und übergebe die GoogleMapOptions an getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) oder 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 in ConsumerMapFragments zu verwenden:

  • Statisch mit der XML-Datei.
  • Dynamisch mit newInstance

Statisch in der XML-Datei

Wenn Sie cloudbasiertes Gestalten von Karteninhalten mit der XML-Datei in ConsumerMapFragment verwenden möchten, fügen Sie das XML-Attribut map:mapId mit der angegebenen mapId hinzu. 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

Wenn Sie cloudbasierte Kartenstile mit newInstance in ConsumerMapFragment verwenden möchten, legen Sie das Feld mapId auf GoogleMapOptions fest und übergeben Sie GoogleMapOptions an 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
  }
}

Wenn Sie einen Kartenstil auf Ihre JavaScript-Karte für die Freigabe von Fahrten anwenden möchten, geben Sie beim Erstellen der JourneySharingMapView eine mapId und eine beliebige andere mapOptions an.

In den folgenden Beispielen wird gezeigt, wie Sie einen Kartenstil mit einer Karten-ID anwenden.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Karten direkt in Ihrem Code stylen

Sie können das Gestalten von Karteninhalten auch anpassen, indem Sie beim Erstellen der JourneySharingMapView die Kartenoptionen festlegen. In den folgenden Beispielen wird gezeigt, wie Sie eine Karte mithilfe von Kartenoptionen gestalten. Weitere Informationen zu den verfügbaren Kartenoptionen finden Sie in der Google Maps JavaScript API-Referenz unter mapOptions.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Sichtbarkeit von Aufgabendaten für das SDK steuern

Mit Sichtbarkeitsregeln können Sie festlegen, welche Aufgabenobjekte auf der Karte angezeigt werden.

Standardsichtbarkeit von Aufgabendaten

Standardmäßig sind Daten für einem Fahrzeug zugewiesene Aufgaben sichtbar, wenn sich das Fahrzeug innerhalb von 5 Haltestellen von der Aufgabe befindet. Die Sichtbarkeit endet, wenn die Aufgabe abgeschlossen oder abgebrochen wurde.

In dieser Tabelle sehen Sie die Standardsichtbarkeit für die einzelnen Aufgabentypen. Sie können die Sichtbarkeit für viele, aber nicht für alle Aufgaben anpassen. Weitere Informationen zu Aufgabentypen finden Sie im Leitfaden Geplante Aufgaben unter Aufgabentypen.

Aufgabentyp Standardsichtbarkeit Anpassbar? Beschreibung
Nicht verfügbare Aufgaben Nicht sichtbar Nein Wird für Pausen und beim Tanken verwendet. Wenn eine Route zu einer Zustellaufgabe auch eine andere Fahrzeughaltestelle enthält, wird diese Haltestelle nicht angezeigt, wenn sie nur Aufgaben zur Nichtverfügbarkeit enthält. Die voraussichtliche Ankunftszeit und die voraussichtliche Dauer der Aufgabe werden für die Zustellungsaufgabe selbst weiterhin angezeigt.
Offene Fahrzeugaufgaben Sichtbar Ja Die Sichtbarkeit endet, wenn die Aufgabe abgeschlossen oder abgebrochen wurde. Sie können die Sichtbarkeit offener Fahrzeugaufgaben anpassen. Weitere Informationen finden Sie unter Sichtbarkeit offener Fahrzeugaufgaben anpassen.
Aufgaben für geschlossene Fahrzeuge Nicht sichtbar Nein Sie können die Sichtbarkeit abgeschlossener Fahrzeugaufgaben nicht anpassen.

Sichtbarkeit offener Fahrzeugaufgaben anpassen

Die Benutzeroberfläche TaskTrackingInfo bietet eine Reihe von Aufgabendatenelementen, die mit dem Consumer SDK sichtbar gemacht werden können.

Anpassbare Aufgabendatenelemente

Polylinien für Routen

Geschätzte Ankunftszeit

Geschätzte Dauer für die Ausführung der Aufgabe

Verbleibende Fahrstrecke bis zur Aufgabe

Verbleibende Haltestellen

Fahrzeugstandort

Sichtbarkeitsoptionen pro Aufgabe

Sie können die Sichtbarkeitskonfiguration für einzelne Aufgaben anpassen. Legen Sie dazu beim Erstellen oder Aktualisieren einer Aufgabe in Flleet Engine TaskTrackingViewConfig fest. Mit den folgenden Sichtbarkeitsoptionen können Sie Kriterien für die Sichtbarkeit eines Aufgabenelements erstellen:

Optionen für die Sichtbarkeit

Anzahl der verbleibenden Haltestellen

Reisedauer bis zur voraussichtlichen Ankunftszeit

Verbleibende Fahrstrecke

Immer sichtbar

Nie sichtbar

Angenommen, mit einer Beispielanpassung wird die Sichtbarkeit von drei Datenelementen anhand der Kriterien in der folgenden Tabelle angepasst. Für alle anderen Elemente gelten die standardmäßigen Sichtbarkeitsregeln.

Datenelement, das angepasst werden soll Sichtbarkeit Kriterium
Polylinie für Route Anzeigen Das Fahrzeug befindet sich in der Nähe einer Haltestelle.
ETA Anzeigen Die verbleibende Fahrstrecke ist kürzer als 5.000 Meter.
Verbleibende Haltestellen Nie einblenden Das Fahrzeug befindet sich in maximal 3 Haltestellen Entfernung.

Das folgende Beispiel zeigt diese Konfiguration:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Polylinien für Routen und Sichtbarkeitsregeln für Fahrzeugstandorte

Polylinien für Routen sind nur sichtbar, wenn auch der Fahrzeugstandort sichtbar ist. Andernfalls kann der Fahrzeugstandort aus dem Ende einer Polylinie abgeleitet werden.

Mithilfe dieser Richtlinien kannst du eine gültige Kombination für die Sichtbarkeitsoptionen für die Routenpolygone und den Fahrzeugstandort erstellen.

Gleiche Sichtbarkeitsoptionen Sichtbarkeitskriterium Anleitung
Optionen für Routenpolylinien auf „Immer sichtbar“ festgelegt Legen Sie fest, dass der Fahrzeugstandort immer sichtbar sein soll.
Der Fahrzeugstandort ist auf „Nie sichtbar“ gesetzt. Legen Sie fest, dass Routenpolylinien nie sichtbar sein sollen.
Die Sichtbarkeitsoption kann eine der folgenden sein:
  • Anzahl der verbleibenden Haltestellen
  • Dauer bis zur geschätzten Ankunftszeit
  • verbleibende Reichweite

Legen Sie die Optionen für die Polylinie auf einen Wert fest, der kleiner oder gleich dem Wert ist, der für den Fahrzeugstandort festgelegt ist. Beispiel:

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
    
Verschiedene Sichtbarkeitsoptionen Sichtbarkeitskriterien Anleitung
Fahrzeugstandort ist sichtbar

Dies geschieht nur, wenn die Sichtbarkeitsoptionen für den Fahrzeugstandort und die Polylinie sowohl erfüllt sind. Beispiel:

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }

In diesem Beispiel ist der Fahrzeugstandort nur sichtbar, wenn die verbleibende Anzahl an Haltestellen mindestens 3 UND die verbleibende Fahrstrecke mindestens 3.000 Meter beträgt.

Automatische Anpassung deaktivieren

Sie können verhindern, dass der Darstellungsbereich der Karte automatisch an das Fahrzeug und die voraussichtliche Route angepasst wird, indem Sie die automatische Anpassung deaktivieren. Im folgenden Beispiel wird gezeigt, wie Sie die automatische Anpassung deaktivieren, wenn Sie die Kartenansicht für die Freigabe von Fahrten konfigurieren.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Nächste Schritte