Karte gestalten

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

  • Cloudbasierte Kartenstile verwenden
  • Optionen für den Kartenstil direkt in Ihrem Code festlegen

Karte mit cloudbasiertem Gestalten von Karteninhalten stylen

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 eigenen Code stylen

Sie können den Kartenstil auch anpassen, indem Sie beim Erstellen der JourneySharingMapView 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 alle Aufgaben anpassen. Weitere Informationen zu Aufgabentypen finden Sie im Leitfaden Geplante Aufgaben unter Aufgabentypen.

Aufgabentyp Standardsichtbarkeit Ist es anpassbar? Beschreibung
Aufgaben bei Nichtverfügbarkeit Nicht sichtbar Nein Wird für Pausen und Tankstopps 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 geschätzte Ankunftszeit und die geschätzte Zeit bis zur Aufgabenerledigung 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 pro Aufgabe anpassen, indem Sie beim Erstellen oder Aktualisieren einer Aufgabe in der Fleet Engine die TaskTrackingViewConfig festlegen. Mit den folgenden Sichtbarkeitsoptionen können Sie Kriterien für die Sichtbarkeit eines Aufgabenelements erstellen:

Sichtbarkeitsoptionen

Verbleibende Haltestellen

Dauer bis zur geschätzten Ankunftszeit

Verbleibende Fahrtstrecke

Immer sichtbar

Nie sichtbar

Angenommen, bei einer Beispielanpassung wird die Sichtbarkeit für drei Datenelemente anhand der in der folgenden Tabelle aufgeführten Kriterien angepasst. Für alle anderen Elemente gelten die Standardregeln für die Sichtbarkeit.

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 der Nähe einer Haltestelle.

Das folgende Beispiel zeigt diese Konfiguration:

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

Regeln für die Sichtbarkeit von Routenpolylinien und Fahrzeugstandorten

Polylinien für Routen können nur angezeigt werden, wenn auch der Fahrzeugstandort sichtbar ist. Andernfalls kann der Fahrzeugstandort anhand des Endes einer Polylinie ermittelt werden.

Diese Richtlinien helfen Ihnen, eine gültige Kombination für die Sichtbarkeit von Routenpolylinien und Fahrzeugstandorten festzulegen.

Dieselben Sichtbarkeitsoptionen Sichtbarkeitskriterium Anleitung
Die Optionen für Routenpolylinien sind auf „Immer sichtbar“ gesetzt. 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.
Folgende Sichtbarkeitsoptionen sind zulässig:
  • Anzahl der verbleibenden Haltestellen
  • Dauer bis zur geschätzten Ankunftszeit
  • verbleibende Reichweite

Legen Sie für die Polylinienoptionen der Route einen Wert fest, der kleiner oder gleich dem für den Fahrzeugstandort festgelegten Wert ist. Beispiel:

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

Das ist nur der Fall, wenn sowohl die Optionen für die Sichtbarkeit des Fahrzeugstandorts als auch die für die Sichtbarkeit von Polylinien 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