Karte gestalten

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

  • Cloudbasierte Kartenstile verwenden
  • Kartenstiloptionen direkt in Ihrem eigenen Code festlegen

Karte mit cloudbasiertem Gestalten von Karteninhalten gestalten

Wenn Sie einen Kartenstil auf Ihre JavaScript-Karte für die Mitfahrgelegenheit anwenden möchten, geben Sie beim Erstellen von JourneySharingMapView eine mapId und alle anderen 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 gestalten

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

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 in einem Umkreis von fünf Haltestellen von der Aufgabe befindet. Die Sichtbarkeit endet, wenn die Aufgabe abgeschlossen oder abgebrochen wird.

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

Aufgabentyp Standardsichtbarkeit Anpassbar? Beschreibung
Aufgaben zur Nichtverfügbarkeit Nicht sichtbar Nein Wird für Fahrerpausen und zum Tanken verwendet. Wenn eine Route zu einer Lieferaufgabe enthält auch eine andere Fahrzeugstation, wird diese Station nicht angezeigt wenn sie nur Aufgaben zur Nichtverfügbarkeit enthält. Die voraussichtliche Ankunftszeit und die voraussichtliche Zeit für den Abschluss der Aufgabe werden weiterhin für die Lieferaufgabe selbst angezeigt.
Offene Fahrzeugaufgaben Sichtbar Ja Die Sichtbarkeit endet, wenn die Aufgabe abgeschlossen oder abgebrochen wird. Sie können die Sichtbarkeit offener Fahrzeugaufgaben anpassen. Weitere Informationen
Abgeschlossene Fahrzeugaufgaben Nicht sichtbar Nein Sie können die Sichtbarkeit abgeschlossener Fahrzeugaufgaben nicht anpassen.

Sichtbarkeit offener Fahrzeugaufgaben anpassen

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

Anpassbare Aufgabendatenelemente

Routenpolylinien

Voraussichtliche Ankunftszeit

Voraussichtliche Zeit für den Abschluss der Aufgabe

Verbleibende Fahrtstrecke zur Aufgabe

Anzahl der verbleibenden Haltestellen

Fahrzeugstandort

Sichtbarkeitsoptionen pro Aufgabe

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

Sichtbarkeitsoptionen

Anzahl der verbleibenden Haltestellen

Dauer bis zur voraussichtlichen Ankunftszeit

Verbleibende Fahrtstrecke

Immer sichtbar

Nie sichtbar

Angenommen, eine Beispielanpassung ändert die Sichtbarkeit für drei Datenelemente anhand der in der folgenden Tabelle aufgeführten Kriterien. Für alle anderen Elemente gelten die Standardsichtbarkeitsregeln.

Anzupassendes Datenelement Sichtbarkeit Kriterium
Routenpolylinie Anzeigen Das Fahrzeug befindet sich in einem Umkreis von drei Haltestellen.
Voraussichtliche Ankunftszeit Anzeigen Die verbleibende Fahrtstrecke ist kürzer als 5.000 Meter.
Anzahl der verbleibenden Haltestellen Nie anzeigen Das Fahrzeug befindet sich in einem Umkreis von drei Haltestellen.

Das folgende Beispiel zeigt diese Konfiguration:

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

Sichtbarkeitsregeln für Routenpolylinien und Fahrzeugstandort

Routenpolylinien können nur sichtbar sein, wenn auch der Fahrzeugstandort sichtbar ist. Andernfalls kann der Fahrzeugstandort anhand des Endes einer Polylinie abgeleitet werden.

Diese Richtlinien helfen Ihnen, eine gültige Kombination für die Sichtbarkeitsoptionen für Routenpolylinien und Fahrzeugstandort zu erstellen.

Gleiche Sichtbarkeitsoptionen Sichtbarkeitskriterium Anleitung
Die Optionen für Routenpolylinien sind auf „Immer sichtbar“ festgelegt. Legen Sie den Fahrzeugstandort auf „Immer sichtbar“ fest.
Der Fahrzeugstandort ist auf „Nie sichtbar“ festgelegt. Legen Sie die Routenpolylinien auf „Nie sichtbar“ fest.
Die Sichtbarkeitsoption ist eine der folgenden:
  • Anzahl der verbleibenden Haltestellen
  • Dauer bis zur voraussichtlichen Ankunftszeit
  • Verbleibende Fahrtstrecke

Legen Sie für die Optionen für Routenpolylinien 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
Der Fahrzeugstandort ist sichtbar.

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

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

In diesem Beispiel ist der Fahrzeugstandort nur sichtbar, wenn die Anzahl der verbleibenden Haltestellen mindestens 3 UND die verbleibende Fahrtstrecke 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. Im folgenden Beispiel wird gezeigt, wie Sie die automatische Anpassung deaktivieren, wenn Sie die Kartenansicht für die Mitfahrgelegenheit 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