Flotte mit der JavaScript-Flotten-Tracking-Bibliothek verfolgen

Dieses Produkt oder diese Funktion ist eine Vorabversion (pre-GA). Pre-GA-Produkte und ‑Features werden eventuell nur eingeschränkt unterstützt. Außerdem sind Änderungen an diesen Produkten und Features möglicherweise nicht mit anderen pre-GA-Versionen kompatibel. Pre-GA-Angebote sind durch die dienstspezifischen Nutzungsbedingungen für die Google Maps Platform abgedeckt. Weitere Informationen finden Sie in den Beschreibungen der Einführungsphasen.

Mit der JavaScript-Flottenverfolgungsbibliothek können Sie die Standorte von Fahrzeugen in Ihren Flotten nahezu in Echtzeit visualisieren. Die Bibliothek verwendet die On Demand Rides and Deliveries API, um Fahrzeuge und Fahrten zu visualisieren. Die Tracking-Bibliothek für die JavaScript-Flotte enthält eine JavaScript-Kartenkomponente, die als Drop-in-Ersatz für eine standardmäßige google.maps.Map-Entität und Datenkomponenten zur Verbindung mit Fleet Engine dient.

Komponenten

Die JavaScript-Flottenverfolgungsbibliothek enthält Komponenten zur Visualisierung von Fahrzeugen und Wegpunkten sowie Rohdaten-Feeds für die voraussichtliche Ankunftszeit oder die verbleibende Entfernung zu einer Fahrt.

Kartenansicht für das Flotten-Tracking

In der Komponente „Kartenansicht für das Flotten-Tracking“ werden der Standort von Fahrzeugen und die Wegpunkte visualisiert. Wenn die Route für ein Fahrzeug bekannt ist, animiert die Komponente für die Kartenansicht das Fahrzeug bei seiner Fahrt auf dem vorhergesagten Pfad.

Standortanbieter

Standortanbieter arbeiten mit in Fleet Engine gespeicherten Informationen, um Standortinformationen zu verfolgten Objekten an die Karte für die Fahrtfreigabe zu senden.

Anbieter von Fahrzeugstandorten

Der Anbieter von Fahrzeugstandorten zeigt die Standortinformationen eines einzelnen Fahrzeugs an. Sie enthält Informationen zum Fahrzeugstandort und zur aktuellen Fahrt, die dem Fahrzeug zugewiesen ist.

Flottenstandortanbieter

Der Flottenstandortanbieter zeigt Standortinformationen für mehrere Fahrzeuge an. Sie können die Ansicht nach einem bestimmten Fahrzeug und dessen Standort filtern oder die Fahrzeugstandorte für den gesamten Fuhrpark anzeigen lassen.

Sichtbarkeit von beobachteten Orten festlegen

Sichtbarkeitsregeln bestimmen, wann ein erfasstes Standortobjekt auf der Karte für einen Fleet Engine-Standortanbieter sichtbar ist. Hinweis: Wenn Sie einen benutzerdefinierten oder abgeleiteten Standortanbieter verwenden, können die Sichtbarkeitsregeln geändert werden.

Fahrzeuge

Ein Fahrzeug ist sichtbar, sobald es in Fleet Engine erstellt wird, und sichtbar, wenn „vehicle_state“ den Wert Online hat. Das bedeutet, dass ein Fahrzeug auch dann sichtbar ist, wenn ihm keine aktuelle Fahrt zugewiesen ist.

Wegpunkt-Standortmarkierungen

Eine Wegpunkt-Standortmarkierung kennzeichnet Punkte entlang der Fahrt eines Fahrzeugs, die mit dem Startort beginnen und mit dem endgültigen Ziel enden. Die Standortmarkierungen für Wegpunkte können so definiert werden:

• Abfahrtsort: Gibt den Startort der Fahrt an.
• Mittel: Gibt Zwischenstopps für die Fahrt an
• Zielort – gibt den endgültigen Ort für die Fahrt an.

Geplante Fahrzeug-Wegpunkte werden auf der Karte als Start-, Zwischen- und Zielmarkierungen angezeigt.

Erste Schritte mit der JavaScript-Flotten-Tracking-Bibliothek

Bevor Sie die JavaScript-Flotten-Tracking-Bibliothek verwenden, sollten Sie sich mit Fleet Engine und dem Abrufen eines API-Schlüssels vertraut machen. Erstellen Sie dann einen Anspruch auf eine Fahrt-ID und eine Fahrzeug-ID.

Anspruch auf Fahrt-ID und Fahrzeug-ID erstellen

Wenn Sie Fahrzeuge über den Fahrzeugstandortanbieter verfolgen möchten, erstellen Sie ein JSON Web Token (JWT) mit einer Fahrt-ID und einer Fahrzeug-ID-Anforderung.

Fügen Sie zum Erstellen der JWT-Nutzlast im Autorisierungsabschnitt eine zusätzliche Anforderung mit den Schlüsseln tripid und vehicleid hinzu und setzen Sie den value jedes Schlüssels auf *. Das Token sollte mit der Cloud IAM-Rolle Fleet Engine Service Super User erstellt werden. Beachten Sie, dass Sie damit umfassenden Zugriff zum Erstellen, Lesen und Ändern von Fleet Engine-Entitäten gewähren und nur vertrauenswürdigen Nutzern Zugriff gewähren sollten.

Das folgende Beispiel zeigt, wie ein Token für das Tracking nach Fahrzeug und Aufgabe erstellt wird:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "[e-mail]",
  "sub": "[e-mail]",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

Abruf von Authentifizierungstokens erstellen

Die JavaScript Fleet Tracking Library fordert mithilfe des Authentifizierungstoken-Abrufs ein Token an, wenn eine der folgenden Bedingungen zutrifft:

• Sie verfügt über kein gültiges Token, z. B. wenn der Fetcher bei einem neuen Seitenaufbau nicht aufgerufen wurde oder der Fetcher nicht mit einem Token zurückgegeben hat.
• Das zuvor abgerufene Token ist abgelaufen.
• Das zuvor abgerufene Token läuft innerhalb einer Minute ab.

Andernfalls verwendet die Bibliothek das zuvor ausgegebene, noch gültige Token und ruft den Fetcher nicht auf.

Sie können einen Abruf von Authentifizierungstokens erstellen, um ein Token, das mit den entsprechenden Anforderungen auf Ihren Servern erstellt wurde, mithilfe eines Dienstkontozertifikats für Ihr Projekt abzurufen. Tokens sollten nur auf Ihren Servern erstellt und keine Zertifikate an Clients weitergegeben werden. Andernfalls gefährden Sie die Sicherheit Ihres Systems.

Der Fetcher muss eine Datenstruktur mit zwei Feldern zurückgeben, die in ein Promise eingeschlossen sind:

• Einen String token.
• Eine Zahl expiresInSeconds. Ein Token läuft in dieser Zeit nach dem Abruf ab.

Das folgende Beispiel zeigt, wie ein Authentifizierungstoken-Abruf erstellt wird:

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

Beachten Sie beim Implementieren des serverseitigen Endpunkts zum Erstellen der Tokens Folgendes:

• Der Endpunkt muss eine Ablaufzeit für das Token zurückgeben. Im obigen Beispiel wird dies als data.ExpiresInSeconds angegeben.
• Der Abruf von Authentifizierungstokens muss die Ablaufzeit (in Sekunden ab Abrufzeitpunkt) wie im Beispiel gezeigt an die Bibliothek übergeben.
• Der Parameter SERVER_TOKEN_URL hängt von Ihrer Back-End-Implementierung ab. Dies sind Beispiel-URLs:
  • https://SERVER_URL/token/driver/VEHICLE_ID
  • https://SERVER_URL/token/consumer/TRIP_ID
  • https://SERVER_URL/token/fleet_reader

Karte aus HTML laden

Das folgende Beispiel zeigt, wie die Bibliothek für das Teilen von JavaScript-Recherchen über eine angegebene URL geladen wird. Der Parameter callback führt die Funktion initMap aus, nachdem die API geladen wurde. Mit dem Attribut defer kann der Browser den Rest der Seite weiter rendern, während die API geladen wird.

 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta" defer></script>

Einem Fahrzeug folgen

In diesem Abschnitt wird beschrieben, wie Sie die JavaScript-Flottenverfolgungsbibliothek verwenden, um einem Fahrzeug zu folgen. Laden Sie die Bibliothek aus der im Skript-Tag angegebenen Callback-Funktion, bevor Sie den Code ausführen.

Anbieter von Fahrzeugstandorten instanziieren

In der JavaScript Fleet Tracking Library ist ein Standortanbieter für die On Demand Rides and Deliveries API bereits definiert. Verwenden Sie Ihre Projekt-ID und einen Verweis auf Ihre Token-Factory, um sie zu instanziieren.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

Kartenansicht initialisieren

Nachdem Sie die Bibliothek für das Teilen von Fahrten mit JavaScript geladen haben, initialisieren Sie die Kartenansicht und fügen Sie sie der HTML-Seite hinzu. Ihre Seite sollte ein <div>-Element enthalten, das die Kartenansicht enthält. Das Element <div> heißt im folgenden Beispiel map_canvas.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Auf Änderungsereignisse warten

Mithilfe des Standortanbieters können Sie Metainformationen zu einem Fahrzeug aus dem vehicle-Objekt abrufen. Die Metainformationen enthalten die voraussichtliche Ankunftszeit und die verbleibende Entfernung vor der nächsten Abholung oder Abgabe des Fahrzeugs. Änderungen an den Metainformationen lösen ein update-Ereignis aus. Das folgende Beispiel zeigt, wie Sie auf diese Änderungsereignisse warten.

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicle contains data that may be
  // useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  // e.vehicle contains data that may be useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

Auf Fehler warten

Fehler, die asynchron durch das Anfordern von Fahrzeuginformationen entstehen, lösen Fehlerereignisse aus. Das folgende Beispiel zeigt, wie auf diese Ereignisse gewartet wird, um Fehler zu beheben.

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

Nicht mehr beobachten

Wenn Sie verhindern möchten, dass der Standortanbieter das Fahrzeug verfolgt, entfernen Sie die Fahrzeug-ID.

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Standortanbieter aus der Kartenansicht entfernen

Das folgende Beispiel zeigt, wie Sie einen Standortanbieter aus der Kartenansicht entfernen.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Fahrzeugflotte ansehen

In diesem Abschnitt wird beschrieben, wie Sie die Bibliothek für die Freigabe von JavaScript-Fahrten verwenden, um eine Fahrzeugflotte aufzurufen. Laden Sie die Bibliothek über die im Script-Tag angegebene Callback-Funktion, bevor Sie den Code ausführen.

Standortanbieter für Fahrzeugflotten instanziieren

In der JavaScript Fleet Tracking Library wird vorab ein Standortanbieter definiert, der mehrere Fahrzeuge aus der On Demand Rides and Deliveries API abruft. Verwenden Sie Ihre Projekt-ID sowie einen Verweis auf Ihren Token-Abruf, um das Token zu instanziieren.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

vehicleFilter gibt eine Abfrage zum Filtern der auf der Karte angezeigten Fahrzeuge an. Dieser Filter wird direkt an Fleet Engine übergeben. Informationen zu unterstützten Formaten findest du unter ListVehiclesRequest.

locationRestriction schränkt den Bereich ein, in dem Fahrzeuge auf der Karte angezeigt werden sollen. Die Funktion bestimmt auch, ob die Standortverfolgung aktiviert ist oder nicht. Die Standortermittlung startet erst dann, wenn diese Einstellung aktiviert ist.

Nachdem der Standortanbieter erstellt wurde, initialisieren Sie die Kartenansicht.

Standortbeschränkung mithilfe des Darstellungsbereichs der Karte festlegen

Die locationRestriction-Grenzen können so konfiguriert werden, dass sie dem in der Kartenansicht sichtbaren Bereich entsprechen.

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Auf Änderungsereignisse warten

Mit dem Standortanbieter können Sie Metainformationen zur Flotte aus dem vehicles-Objekt abrufen. Die Metainformationen umfassen Fahrzeugeigenschaften wie den Navigationsstatus, die Entfernung zum nächsten Wegpunkt und benutzerdefinierte Attribute. Weitere Informationen finden Sie in der Referenzdokumentation. Eine Änderung an den Metainformationen löst ein Update-Ereignis aus. Das folgende Beispiel zeigt, wie Sie auf diese Änderungsereignisse warten.

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

Auf Fehler warten

Fehler, die asynchron durch das Anfordern von Fahrzeugflotteninformationen entstehen, lösen Fehlerereignisse aus. Beispiele zum Überwachen dieser Ereignisse finden Sie unter Auf Fehler warten.

Nicht mehr beobachten

Wenn Sie verhindern möchten, dass der Standortanbieter die Flotte verfolgt, setzen Sie die Grenzen des Standortanbieters auf null.

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Standortanbieter aus der Kartenansicht entfernen

Das folgende Beispiel zeigt, wie Sie einen Standortanbieter aus der Kartenansicht entfernen.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Design der Basiskarte anpassen

Wenn Sie das Erscheinungsbild der Kartenkomponente anpassen möchten, können Sie mit cloudbasierten Tools Ihre Karte gestalten oder Optionen direkt im Code festlegen.

Cloudbasiertes Gestalten von Karteninhalten verwenden

Mit dem cloudbasierten Gestalten von Karteninhalten können Sie über die Google Cloud Console Kartenstile für alle Apps, in denen Google Maps verwendet wird, erstellen und bearbeiten, ohne dass Änderungen am Code erforderlich sind. Die Kartenstile werden als Karten-IDs in Ihrem Cloud-Projekt gespeichert. Wenn Sie einen Stil auf Ihre JavaScript-Flotten-Tracking-Karte anwenden möchten, geben Sie beim Erstellen der JourneySharingMapView einen mapId an. Das Feld mapId kann nicht mehr geändert oder hinzugefügt werden, nachdem JourneySharingMapView instanziiert wurde. Im folgenden Beispiel wird gezeigt, wie Sie einen zuvor erstellten Kartenstil mit einer Karten-ID aktivieren.

JavaScript

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

TypeScript

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

Codebasiertes Gestalten von Karteninhalten verwenden

Eine weitere Möglichkeit zum Anpassen des Kartenstils besteht darin, mapOptions festzulegen, wenn Sie die JourneySharingMapView erstellen.

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" }
        ]
      }
    ]
  }
});

Benutzerdefinierte Markierungen verwenden

Mit der JavaScript-Flotten-Tracking-Bibliothek können Sie das Design von Markierungen anpassen, die der Karte hinzugefügt wurden. Dazu müssen Sie die Markierungsanpassungen festlegen, die dann in der Flotten-Tracking-Bibliothek vor dem Hinzufügen von Markierungen zur Karte und bei jeder Aktualisierung angewendet werden.

Sie können eine einfache Anpassung erstellen, indem Sie ein MarkerOptions-Objekt angeben, das auf alle Markierungen desselben Typs angewendet werden soll. Die im Objekt angegebenen Änderungen werden nach dem Erstellen jeder Markierung angewendet und überschreiben alle Standardoptionen.

Als erweiterte Option können Sie eine Anpassungsfunktion angeben. Mithilfe von Anpassungsfunktionen können Sie Markierungen basierend auf Daten gestalten und Markierungen interaktiv gestalten, z. B. beim Umgang mit Klicks. Insbesondere übergibt die Flottenverfolgung Daten zu dem Objekttyp, den die Markierung repräsentiert: Fahrzeug, Haltestelle oder Aufgabe an die Anpassungsfunktion. Dann kann sich der Stil der Markierung an den aktuellen Status des Markierungselements anpassen, z. B. die Anzahl der verbleibenden Haltestellen oder die Art der Aufgabe. Sie können sogar Daten aus Quellen außerhalb von Fleet Engine zusammenführen und die Markierung basierend auf diesen Informationen gestalten.

Darüber hinaus können Sie Anpassungsfunktionen verwenden, um die Sichtbarkeit von Markierungen zu filtern. Rufen Sie dazu setVisible(false) für die Markierung auf.

Aus Leistungsgründen empfehlen wir jedoch, mit der nativen Filterung im Standortanbieter zu filtern, z. B. FleetEngineFleetLocationProvider.vehicleFilter. Wenn Sie jedoch zusätzliche Filterfunktionen benötigen, können Sie Filter mithilfe der Anpassungsfunktion anwenden.

Die Bibliothek für das Flotten-Tracking bietet die folgenden Anpassungsparameter:

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

Den Stil von Markierungen mit MarkerOptions ändern

Im folgenden Beispiel wird der Stil einer Fahrzeugmarkierung mit einem MarkerOptions-Objekt konfiguriert. Folgen Sie diesem Muster, um den Stil einer Markierung mithilfe der oben aufgeführten Parameter anzupassen.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Den Stil von Markierungen mithilfe von Anpassungsfunktionen ändern

Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung konfigurieren. Folgen Sie diesem Muster, um den Stil einer Markierung mithilfe der oben aufgeführten Parameter anzupassen.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

Click Handling zu Markierungen

Das folgende Beispiel zeigt, wie Sie einer Fahrzeugmarkierung Click Handling hinzufügen. Folgen Sie diesem Muster, um mithilfe der oben aufgeführten Parameter zur Anpassung von Markierungen einer Markierung Klickbehandlung hinzuzufügen.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Sichtbare Markierungen filtern

Das folgende Beispiel zeigt, wie Sie filtern können, welche Fahrzeugmarkierungen sichtbar sind. Folgen Sie diesem Muster, um Markierungen mit einem der oben aufgeführten Parameter zur Anpassung von Markierungen zu filtern.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Polylinienanpassungen verwenden, wenn du einem Fahrzeug folgst

Mit der Flottenverfolgungsbibliothek können Sie auch das Design der Route des Fahrzeugs, dem Sie folgen, auf der Karte anpassen. Die Bibliothek erstellt für jedes Koordinatenpaar im aktiven oder verbleibenden Pfad des Fahrzeugs ein google.maps.Polyline-Objekt. Sie können die Polyline-Objekte gestalten, indem Sie Polylinienanpassungen angeben. Diese Anpassungen werden dann in zwei Situationen angewendet: bevor die Objekte zur Karte hinzugefügt werden und wenn sich die für die Objekte verwendeten Daten geändert haben.

Ähnlich wie bei der Anpassung von Markierungen können Sie eine Gruppe von PolylineOptions angeben, die auf alle übereinstimmenden Polyline-Objekte angewendet wird, wenn sie erstellt oder aktualisiert werden.

Ebenso können Sie eine Anpassungsfunktion angeben. Anpassungsfunktionen ermöglichen eine individuelle Gestaltung der Objekte auf der Grundlage von Daten, die von Fleet Engine gesendet werden. Die Funktion kann den Stil jedes Objekts basierend auf dem aktuellen Status des Fahrzeugs ändern. Beispielsweise kann das Polyline-Objekt eine tiefere Schattierung erhalten oder es dicker machen, wenn das Fahrzeug langsamer fährt. Sie können sogar einen Join aus Quellen außerhalb von Fleet Engine durchführen und das Polyline-Objekt basierend auf diesen Informationen gestalten.

Sie können die Anpassungen mithilfe der in FleetEngineVehicleLocationProviderOptions bereitgestellten Parameter angeben. Sie können Anpassungen für verschiedene Pfadzustände auf der Fahrt des Fahrzeugs festlegen – bereits zurückgelegt, aktiv unterwegs oder noch nicht zurückgelegt. Die Parameter sind:

• takenPolylineCustomization für einen bereits zurückgelegten Pfad;
• activePolylineCustomization für eine sich aktiv bewegende Route;
• remainingPolylineCustomization, für einen noch nicht zurückgelegten Weg.

Stil von Polyline-Objekten mit PolylineOptions ändern

Das folgende Beispiel zeigt, wie Sie den Stil für ein Polyline-Objekt mit PolylineOptions konfigurieren. Folgen Sie diesem Muster, um den Stil eines Polyline-Objekts mit einer der zuvor aufgeführten Polylinienanpassungen anzupassen.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Den Stil von Polyline-Objekten mithilfe von Anpassungsfunktionen ändern

Das folgende Beispiel zeigt, wie Sie das Gestalten eines aktiven Polyline-Objekts konfigurieren. Folgen Sie diesem Muster, um den Stil eines beliebigen Polyline-Objekts mithilfe der oben aufgeführten Parameter zur Anpassung der Polylinie anzupassen.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Sichtbarkeit von Polyline-Objekten steuern

Standardmäßig sind alle Polyline-Objekte sichtbar. Um ein Polyline-Objekt unsichtbar zu machen, legen Sie dessen Attribut visible fest:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Traffic-sensitive Polyline-Objekte rendern

Fleet Engine gibt Daten zur Verkehrsgeschwindigkeit für die aktiven und verbleibenden Pfade für das Folgen zurück. Anhand dieser Informationen können Sie die Polyline-Objekte entsprechend ihrer Trafficgeschwindigkeit gestalten:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

InfoWindow für eine Fahrzeug- oder Standortmarkierung anzeigen

Mit einem InfoWindow lassen sich zusätzliche Informationen zu einem Fahrzeug oder einer Standortmarkierung anzeigen.

Im folgenden Beispiel wird gezeigt, wie Sie eine InfoWindow erstellen und an eine Fahrzeugmarkierung anhängen.

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

Automatische Anpassung deaktivieren

Sie können verhindern, dass der Darstellungsbereich der Karte automatisch an das Fahrzeug und die erwartete Route angepasst wird, indem Sie die automatische Anpassung deaktivieren. Im folgenden Beispiel wird gezeigt, wie Sie die automatische Anpassung deaktivieren, wenn Sie die Kartenansicht mit dem Teilen der Route 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,
  ...
});

Vorhandene Karte ersetzen

Sie können eine vorhandene Karte mit Markierungen oder anderen Anpassungen ersetzen, ohne diese Anpassungen zu verlieren.

Angenommen, Sie haben eine Webseite mit einer Standardentität google.maps.Map, auf der eine Markierung angezeigt wird:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      // Initialize and add the map
      function initMap() {
        // The location of Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // The map, initially centered at Mountain View, CA.
        var map = new google.maps.Map(document.getElementById("map"));
        map.setOptions({ center: { lat: 37.424069, lng: -122.0916944 }, zoom: 14 });

        // The marker, now positioned at Oracle Park
        var marker = new google.maps.Marker({ position: oraclePark, map: map });
      }
    </script>
    <!-- Load the API from the specified URL.
      * The async attribute allows the browser to render the page while the API loads.
      * The key parameter will contain your own API key (which is not needed for this tutorial).
      * The callback parameter executes the initMap() function.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    ></script>
  </body>
</html>

So fügen Sie die JavaScript-Bibliothek für das Teilen von Kaufprozessen hinzu, die Flotten-Tracking enthält:

1. Fügen Sie Code für die Authentifizierungstoken-Factory hinzu.
2. Initialisieren Sie einen Standortanbieter in der Funktion initMap().
3. Initialisieren Sie die Kartenansicht in der initMap()-Funktion. Die Ansicht enthält die Karte.
4. Verschieben Sie Ihre Anpassungen in die Callback-Funktion für die Initialisierung der Kartenansicht.
5. Fügen Sie dem API-Ladeprogramm die Standortbibliothek hinzu.

Das folgende Beispiel zeigt die erforderlichen Änderungen:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      let locationProvider;

      // (1) Authentication Token Fetcher
      function authTokenFetcher(options) {
        // options is a record containing two keys called
        // serviceType and context. The developer should
        // generate the correct SERVER_TOKEN_URL and request
        // based on the values of these fields.
        const response = await fetch(SERVER_TOKEN_URL);
            if (!response.ok) {
              throw new Error(response.statusText);
            }
            const data = await response.json();
            return {
              token: data.Token,
              expiresInSeconds: data.ExpiresInSeconds
            };
      }

      // Initialize and add the map
      function initMap() {
        // (2) Initialize location provider. Use FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          YOUR_PROVIDER_ID,
          authTokenFetcher,
        });

        // (3) Initialize map view (which contains the map).
        const mapView = new google.maps.journeySharing.JourneySharingMapView({
          element: document.getElementById('map'),
          locationProviders: [locationProvider],
          // any styling options
        });

      mapView.addListener('ready', () => {
        locationProvider.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

          // The location of Oracle Park
          var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
          // The map, initially centered at Mountain View, CA.
          var map = mapView.map;
          map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
          // The marker, now positioned at Oracle Park
          var marker = new google.maps.Marker({position: oraclePark, map: map});
        };
      }
    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta"
    ></script>
  </body>
</html>

Wenn Sie ein Fahrzeug mit der angegebenen ID in der Nähe von Oracle Park betreiben, wird es auf der Karte gerendert.