Flotte mit der JavaScript-Flotten-Tracking-Bibliothek verfolgen

Mit der JavaScript Fleet Tracking Library können Sie die Positionen Fahrzeuge in Ihren Flotten nahezu in Echtzeit. Die Bibliothek nutzt die Funktion On Demand Rides and Deliveries (Fahrgeschäfte und Lieferungen) API die Visualisierung von Fahrzeugen und Fahrten ermöglichen. Die JavaScript-Flotte Die Tracking-Bibliothek enthält eine JavaScript-Kartenkomponente, die ein Drop-in ist. Ersetzen einer standardmäßigen google.maps.Map-Entität und -Datenkomponenten sich mit der Fleet Engine zu verbinden.

Komponenten

Die JavaScript-Flotten-Tracking-Bibliothek enthält Komponenten zur Visualisierung Fahrzeuge und Wegpunkte sowie Rohdaten-Feeds für voraussichtliche Ankunftszeiten und Entfernung einer Fahrt.

Kartenansicht für das Flotten-Tracking

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

Kartenansicht für das Flotten-Tracking Beispiel

Standortanbieter

Standortanbieter nutzen in Fleet Engine gespeicherte Informationen, um Informationen zu beobachteten Objekten in die Karte mit dem Teilen der Route einfügen.

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.

Flottenstandortanbieter

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

Sichtbarkeit von beobachteten Orten festlegen

Mit Sichtbarkeitsregeln wird festgelegt, wann ein erfasstes Standortobjekt auf der Karte sichtbar ist für einen Fleet Engine-Standortanbieter. Hinweis: Verwendung eines benutzerdefinierten oder abgeleiteten Standorts kann der Anbieter die Sichtbarkeitsregeln ändern.

Fahrzeuge

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

Wegpunkt-Standortmarkierungen

Eine Wegpunkt-Standortmarkierung kennzeichnet Punkte entlang des Startpunkts der Fahrt eines Fahrzeugs. mit dem Startort und endend mit dem endgültigen Zielort. Wegpunktposition Markierungen 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 Startort, Zwischenland und Zielmarkierungen an.

Erste Schritte mit der JavaScript-Flotten-Tracking-Bibliothek

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

Anspruch auf Fahrt-ID und Fahrzeug-ID erstellen

Um Fahrzeuge anhand des Fahrzeugstandorts zu verfolgen , erstellen Sie ein JSON Web Token (JWT) mit einer Fahrt Anspruch auf Ausweis und Fahrzeugausweis.

Fügen Sie zum Erstellen der JWT-Nutzlast im Autorisierungsabschnitt eine zusätzliche Anforderung hinzu mit den Schlüsseln tripid und vehicleid und setze die value der einzelnen Tasten auf *. Das Token sollte mit dem Fleet Engine Service Super User Cloud erstellt werden. IAM-Rolle Beachten Sie, dass dadurch umfassenden Zugriff zum Erstellen, Lesen und Ändern von Flotten gewährt wird Engine-Entitäten. Sie sollten nur für vertrauenswürdige Nutzer freigegeben werden.

Das folgende Beispiel zeigt, wie Sie ein Token für die Verfolgung nach Fahrzeug und Aufgabe:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "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 der Authentifizierung ein Token an. Token-Abruf, wenn eine der folgenden Bedingungen zutrifft:

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

Andernfalls verwendet die Bibliothek das zuvor ausgestellte, noch gültige Token und nutzt nicht den Fetcher aufrufen.

Sie können einen Abruf von Authentifizierungstokens erstellen, um ein Token abzurufen, das mit die entsprechenden Anforderungen auf Ihren Servern über ein Dienstkonto Zertifikat für Ihr Projekt. Tokens sollten nur auf Ihrem Server und geben Ihre Zertifikate niemals auf Clients frei. Andernfalls können Sie die Sicherheit Ihres Systems gefährden.

Der Fetcher muss eine Daten- Struktur mit zwei Feldern, die von einem Promise eingeschlossen sind:

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

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(),
  };
}

Behalten Sie bei der Implementierung des serverseitigen Endpunkts zum Erstellen der Tokens den Parameter im Hinterkopf:

  • Der Endpunkt muss eine Ablaufzeit für das Token zurückgeben. im obigen Beispiel wird dies als data.ExpiresInSeconds angegeben.
  • Beim Abrufen von Authentifizierungstokens muss die Ablaufzeit (in Sekunden, vom Zeitpunkt des Abrufs) an die Bibliothek übertragen, wie im Beispiel gezeigt.
  • Der Parameter SERVER_TOKEN_URL hängt von Ihrer Back-End-Implementierung ab. Dies sind Beispiel-URLs: <ph type="x-smartling-placeholder">
      </ph>
    • 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 geladen wird von einer angegebenen URL. Der Parameter callback führt die Funktion initMap aus. nachdem die API geladen wurde. Mit dem Attribut defer kann der Browser das Rendern fortsetzen. der Seite, 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 erfahren Sie, wie Sie mit der JavaScript-Flotten-Tracking-Bibliothek Fahrzeug. Stellen Sie sicher, dass die Bibliothek aus der Callback-Funktion geladen wird, die im das Script-Tag, bevor Sie den Code ausführen.

Anbieter von Fahrzeugstandorten instanziieren

In der JavaScript Fleet Tracking Library ist ein Standortanbieter für den On Demand Rides and Deliveries API 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

Initialisieren Sie nach dem Laden der Bibliothek für das Teilen der Reise die Kartenansicht. und fügen es zur HTML-Seite hinzu. Ihre Seite sollte ein &lt;div&gt;-Element enthalten. der die Kartenansicht enthält. Das Element &lt;div&gt; heißt &lt;div&gt;, Beispiel unten.

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

Du kannst Metainformationen zu einem Fahrzeug aus dem vehicle-Objekt abrufen mithilfe des Standortanbieters. Die Metainformationen umfassen die voraussichtliche Ankunftszeit und die verbleibenden Entfernung vor der nächsten Abholung oder Abgabe. Änderungen am Meta-Tag Informationen lösen ein update-Ereignis aus. Das folgende Beispiel zeigt, wie die Wiedergabe funktioniert. zu diesen Änderungsereignissen.

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 auftreten Fehlerereignisse. 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 du verhindern möchtest, dass der Standortanbieter das Fahrzeug verfolgt, entferne die Fahrzeug-ID vom Standortanbieter.

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 mit der Bibliothek für das Teilen von JavaScript-Reisen eine Fahrzeugflotte. Vergessen Sie nicht, die Bibliothek aus der Callback-Funktion zu laden. im Script-Tag angegeben, bevor Sie den Code ausführen.

Standortanbieter für Fahrzeugflotten instanziieren

In der Vorabeinstellung der JavaScript Fleet Tracking Library wird ein Standortanbieter definiert, der ruft mehrere Fahrzeuge aus der On Demand Rides and Deliveries API ab. Verwenden Sie Ihr Projekt-ID und einen Verweis auf Ihren Token-Abruf, um ihn 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. Weitere Informationen finden Sie unter ListVehiclesRequest für unterstützte Formate.

locationRestriction schränkt das Gebiet ein, in dem Fahrzeuge auf der Karte angezeigt werden sollen. Die Funktion bestimmt auch, ob die Standortverfolgung aktiviert ist oder nicht. Standortermittlung beginnt erst, wenn dieser festgelegt ist.

Sobald der Standortanbieter erstellt ist, initialisieren Sie die Karte.

Standortbeschränkung mithilfe des Darstellungsbereichs der Karte festlegen

Die locationRestriction-Grenzen können so konfiguriert werden, dass sie mit dem Bereich übereinstimmen, der sichtbar ist in in der Kartenansicht.

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

Sie können Metainformationen über die Flotte aus dem vehicles-Objekt abrufen mithilfe des Standortanbieters. Die Metainformationen enthalten Fahrzeugeigenschaften wie Navigationsstatus, Entfernung zum nächsten Wegpunkt und benutzerdefinierte Attribute Siehe Referenz Dokumentation . Eine Änderung an den Metainformationen löst ein Update-Ereignis aus. Die Das folgende Beispiel zeigt, wie auf diese Änderungsereignisse gewartet wird.

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 bei der Anforderung von Fahrzeugflotteninformationen auftreten Fehlerereignisse auslösen. Beispiele für das Überwachen dieser Ereignisse finden Sie unter zu Auf Fehler warten.

Nicht mehr beobachten

Um zu verhindern, dass der Standortanbieter die Flotte verfolgt, legen Sie die Grenzen der Standortanbieter auf null gesetzt.

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

Um das Design der Karten-Komponente anzupassen, gestalten Sie Ihre Karte mithilfe von cloudbasierten Tools nutzen oder Optionen direkt im Code festlegen.

Cloudbasiertes Gestalten von Karteninhalten verwenden

Cloudbasiertes Gestalten von Karteninhalten können Sie Kartenstile für alle Ihre Apps erstellen und bearbeiten, in denen Google Maps verwendet wird. ohne Änderungen am Code vornehmen zu müssen. Die Kartenstile werden als Karten-IDs in Ihrem Cloud-Projekt gespeichert. So wenden Sie einen Stil auf Ihre JavaScript-Flotten-Tracking-Karte, geben Sie eine mapId beim Erstellen der JourneySharingMapView. Das Feld „mapId“ kann nicht geändert werden oder hinzugefügt werden, nachdem JourneySharingMapView instanziiert wurde. Die folgenden In diesem 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 beim Erstellen der JourneySharingMapView.

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 Erscheinungsbild von Markierungen, die der Karte hinzugefügt wurden. Dazu legen Sie benutzerdefinierte Markierungen fest, die dann von der Flottenverfolgungsbibliothek angewendet wird, bevor der Karte Markierungen hinzugefügt werden und bei jeder Aktualisierung von Markierungen.

Sie können eine einfache Anpassung erstellen, indem Sie eine MarkerOptions -Objekt, das auf alle Markierungen desselben Typs angewendet werden soll. Die Änderungen, die in den werden nach dem Erstellen der einzelnen Markierungen angewendet und überschreiben dabei die Optionen.

Als erweiterte Option können Sie eine Anpassungsfunktion angeben. Anpassungsfunktionen ermöglichen die Gestaltung von Markierungen auf der Grundlage von Daten sowie wie das Hinzufügen von Interaktivität zu Markierungen, wie z. B. Klickhandhabung. Insbesondere Flotte Bei der Verfolgung werden Daten über den Objekttyp, der Markierung steht für: Fahrzeug, Haltestelle oder Aufgabe. Dadurch können die Stile der Markierungen Sie ändern sich basierend auf dem aktuellen Status des Markierungselements selbst. Beispiel: Der Anzahl der verbleibenden Haltestellen oder Art der Aufgabe. Sie können sogar Daten aus Quellen außerhalb von Fleet Engine an und gestalten die Markierung auf der Grundlage dieser Informationen.

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

Aus Leistungsgründen empfehlen wir jedoch, mit nativen Anzeigen Filterung beim Standortanbieter, z. B. FleetEngineFleetLocationProvider.vehicleFilter Wenn Sie zusätzliche Filterfunktionen benötigen, mithilfe der Anpassungsfunktion filtern.

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

Den Stil von Markierungen mit MarkerOptions ändern

Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung mit einem MarkerOptions-Objekt. Folgen Sie diesem Muster, um den Stil eines beliebigen Markierung mithilfe eines der oben aufgeführten Parameter zur Anpassung der Markierung.

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 dieses Muster, um den Stil einer beliebigen Markierung mithilfe der Markierung anzupassen. die oben aufgeführten Anpassungsparameter.

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 Click Handling zu allen Markierungen hinzuzufügen, die eine der Markierungen verwenden. die oben aufgeführten Anpassungsparameter.

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 einer der Markierungsanpassungen zu filtern. die oben aufgeführten Parameter.

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 Flotten-Tracking-Bibliothek können Sie auch das Erscheinungsbild die Route des Fahrzeugs, dem Sie folgen, auf der Karte. Die Bibliothek erstellt ein google.maps.Polyline -Objekt für jedes Koordinatenpaar in den aktiven oder verbleibenden path. Sie können die Polyline-Objekte gestalten, indem Sie Polylinienanpassungen angeben. Die werden diese Anpassungen dann in zwei Situationen angewendet: -Objekten zur Karte hinzugefügt wird und wann sich die für die -Objekte verwendeten Daten geändert haben.

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

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 von ändern. des Fahrzeugs; Sie können z. B. das Polyline-Objekt in einer tieferen Schattierung einfärben oder wird es dicker, wenn das Fahrzeug langsamer fährt. Sie können sogar gegen aus Quellen außerhalb von Fleet Engine ändern und das Polyline-Objekt entsprechend gestalten. Informationen.

Sie können die Anpassungen mithilfe der Parameter in den FleetEngineVehicleLocationProviderOptions Sie können Anpassungen für verschiedene Pfadzustände in der die bereits gereist sind, aktiv reisen oder noch nicht gereist sind. Die -Parameter sind wie folgt:

Stil von Polyline-Objekten mit PolylineOptions ändern

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

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 die Methode zum Konfigurieren eines aktiven Polyline-Objekts Stile. Folgen Sie diesem Muster, um den Stil eines Polyline-Objekts anzupassen mithilfe der zuvor aufgeführten Parameter zur Anpassung der Polylinie.

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. So erstellen Sie ein Polyline-Objekt: unsichtbar werden, visible Property:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Traffic-sensitive Polyline-Objekte rendern

Fleet Engine gibt Daten zur Traffic-Geschwindigkeit für die aktiven und verbleibenden Pfade für folgte. Anhand dieser Informationen können Sie den Polyline gestalten. -Objekten entsprechend ihrer Verkehrsgeschwindigkeit:

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

Sie können einen InfoWindow um zusätzliche Informationen zu einem Fahrzeug oder einer Standortmarkierung anzuzeigen.

Das folgende Beispiel zeigt, wie Sie ein InfoWindow erstellen und an ein Fahrzeugmarkierung.

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 sich der Darstellungsbereich der Karte automatisch an das Fahrzeug anpasst und Route berechnen, indem Sie die automatische Anpassung deaktivieren. Im folgenden Beispiel sehen Sie, Wie deaktiviere ich die automatische Anpassung beim Konfigurieren der Karte für das Teilen der Reise Ansicht.

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 ersetzen, die Markierungen oder andere Anpassungen enthält. ohne die Anpassungen zu verlieren.

Beispiel: Du hast eine Webseite mit einer standardmäßigen google.maps.Map. Entität, für die 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
  4. Ihre Anpassung in die Callback-Funktion für die Kartenansicht verschieben die Initialisierung bei.
  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 dem