Karte gestalten

In diesem Dokument wird beschrieben, wie Sie das Erscheinungsbild einer Karte anpassen und die Datensichtbarkeit und die Optionen für den Darstellungsbereich steuern. Dazu haben Sie folgende Möglichkeiten:

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

Karte mit cloudbasiertem Gestalten von Karteninhalten gestalten

Wenn Sie einen Kartenstil auf Ihre JavaScript-Karte für die gemeinsame Nutzung von Fahrten anwenden möchten, geben Sie beim Erstellen von JourneySharingMapView eine mapId und alle anderen mapOptions an.

Die folgenden Beispiele zeigen, 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 gestalten

Sie können den Kartenstil auch anpassen, indem Sie beim Erstellen von JourneySharingMapView Kartenoptionen festlegen. Die folgenden Beispiele zeigen, wie Sie eine Karte mit Kartenoptionen gestalten. Weitere Informationen dazu, welche Kartenoptionen Sie festlegen können, 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 die Sichtbarkeit bestimmter Aufgabenobjekte auf der Karte steuern.

Standardsichtbarkeit von Aufgabendaten

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

In dieser Tabelle sehen Sie die Standardeinstellung für die Sichtbarkeit 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.

Art der Aufgabe Standardsichtbarkeit Anpassbar? Beschreibung
Aufgaben zur Nichtverfügbarkeit Nicht sichtbar Nein Wird für Fahrerpausen und zum Tanken verwendet. Wenn eine Route zu einer Lieferaufgabe auch einen anderen Fahrzeugstopp enthält, wird dieser Stopp nicht angezeigt, wenn er nur Aufgaben zur Nichtverfügbarkeit enthält. Die voraussichtliche Ankunftszeit und die voraussichtliche Zeit für die Ausführung der Aufgabe werden weiterhin für die Lieferaufgabe selbst angezeigt.
Fahrzeugaufgaben öffnen Sichtbar Ja Die Sichtbarkeit endet, wenn die Aufgabe abgeschlossen oder abgebrochen wird. Sie können die Sichtbarkeit offener Fahrzeugaufgaben anpassen. Weitere Informationen finden Sie unter Sichtbarkeit offener Fahrzeugaufgaben anpassen.
Abgeschlossene Fahrzeugaufgaben Nicht sichtbar Nein Sie können die Sichtbarkeit geschlossener Fahrzeugaufgaben nicht anpassen.

Sichtbarkeit offener Fahrzeugaufgaben anpassen

Die TaskTrackingInfo-Schnittstelle bietet eine Reihe von Aufgabendaten, die mit dem Consumer SDK sichtbar gemacht werden können.

Anpassbare Aufgabendatenelemente

Routenpolylinien

Voraussichtliche Ankunftszeit

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

Verbleibende Fahrstrecke zur Aufgabe

Verbleibende Anzahl der Stopps

Fahrzeugstandort

Sichtbarkeitsoptionen pro Aufgabe

Sie können die Sichtbarkeitskonfiguration für jede Aufgabe einzeln anpassen, indem Sie beim Erstellen oder Aktualisieren einer Aufgabe in Fleet Engine die TaskTrackingViewConfig festlegen. Verwenden Sie die folgenden Sichtbarkeitsoptionen, um Kriterien für die Sichtbarkeit eines Aufgabenbestandteils zu erstellen:

Sichtbarkeitsoptionen

Verbleibende Anzahl der Stopps

Dauer bis zur voraussichtlichen Ankunftszeit

Verbleibende Fahrstrecke

Immer sichtbar

Nie sichtbar

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

Anzupassendes Datenelement Sichtbarkeit Kriterium
Routen-Polylinie Anzeigen Das Fahrzeug ist maximal drei Haltestellen entfernt.
ETA Anzeigen Die verbleibende Fahrstrecke ist kürzer als 5.000 Meter.
Verbleibende Anzahl der Stopps Nie anzeigen Das Fahrzeug ist maximal drei Haltestellen entfernt.

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

Routen-Polylinien können nur sichtbar sein, wenn auch der Fahrzeugstandort sichtbar ist. Andernfalls kann der Fahrzeugstandort aus dem Ende einer Polylinie abgeleitet werden.

Diese Richtlinien helfen Ihnen, eine gültige Kombination für die Optionen für die Sichtbarkeit der Routen-Polylinie und des Fahrzeugstandorts anzugeben.

Gleiche Sichtbarkeitsoptionen Sichtbarkeitskriterium Anleitung
Die Optionen für Routen-Polylinien sind auf „Immer sichtbar“ eingestellt. Legen Sie fest, dass der Standort des Fahrzeugs immer sichtbar ist.
Der Fahrzeugstandort ist auf „Nie sichtbar“ eingestellt. Legen Sie fest, dass Routenpolylinien nie sichtbar sind.
Die Sichtbarkeitsoption ist eine der folgenden:
  • Anzahl der verbleibenden Stopps
  • Dauer bis zur voraussichtlichen Ankunftszeit
  • verbleibende Fahrstrecke

Legen Sie für die Optionen für die Routen-Polylinie 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

Dies geschieht nur, wenn sowohl die Optionen für den Fahrzeugstandort als auch für die Sichtbarkeit der Polylinie erfüllt sind. Beispiel:

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

In diesem Beispiel ist der Standort des Fahrzeugs nur sichtbar, wenn die verbleibende Anzahl an Stopps mindestens 3 UND die verbleibende Fahrstrecke mindestens 3.000 Meter beträgt.

Automatische Anpassung deaktivieren

Sie können verhindern, dass die Karte den Darstellungsbereich automatisch an das Fahrzeug und die voraussichtliche Route anpasst, indem Sie die automatische Anpassung deaktivieren. Das folgende Beispiel zeigt, wie Sie die automatische Anpassung deaktivieren, wenn Sie die Kartenansicht für die Routenfreigabe 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