Flotte mit der JavaScript-Flotten-Tracking-Bibliothek verfolgen

Mit der JavaScript-Flotten-Tracking-Bibliothek können Sie die Standorte visualisieren, von Fahrzeugen in ihren Flotten nahezu in Echtzeit. Die Bibliothek verwendet die Deliveries API um die Visualisierung von Lieferfahrzeugen und -aufgaben zu ermöglichen. Zum Beispiel JavaScript Shipment Tracking Library Es enthält eine JavaScript-Kartenkomponente, die als Drop-in-Ersatz fungiert. für eine Standardentität google.maps.Map und Datenkomponenten, die verbunden werden sollen mit Fleet Engine.

Komponenten

Die JavaScript-Flotten-Tracking-Bibliothek enthält Komponenten für die Visualisierung von Lieferfahrzeugen und -stopps sowie Rohdaten-Feeds für voraussichtliche Ankunftszeiten Entfernung bis zur Lieferung.

Kartenansicht für das Flotten-Tracking

Mit der Komponente „Flotten-Tracking“ in der Kartenansicht Standort von Fahrzeugen und Aufgaben. Wenn die Route für ein Fahrzeug bekannt ist, wird mit der Komponente „Kartenansicht“ das Fahrzeug animiert, während es sich auf dem vorhergesagten Weg bewegt.

Standortanbieter

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

Standortanbieter des Lieferfahrzeugs

Der Standortanbieter für Lieferfahrzeuge zeigt die Standortinformationen. Sie enthält Informationen zum Fahrzeugstandort und zur Aufgaben, die vom Lieferfahrzeug erledigt wurden.

Standortanbieter für Lieferflotten

Der Anbieter des Flottenstandorts zeigt die Standort Informationen. Sie können nach bestimmten Fahrzeugen oder Standorten filtern oder für die gesamte Flotte.

Sichtbarkeit von beobachteten Orten festlegen

In diesem Abschnitt werden die Sichtbarkeitsregeln für erfasste Standortobjekte beschrieben. für den vordefinierten Standortanbieter von Fleet Engine. Benutzerdefiniert oder abgeleitet Standortanbieter können die Sichtbarkeitsregeln ändern.

Lieferfahrzeuge

Ein Lieferfahrzeug ist sichtbar, sobald es in Fleet Engine erstellt wird. und ist unabhängig von den Aufgaben auf der gesamten Route sichtbar.

Standortmarkierungen für Aufgaben

Geplante Haltestellen werden auf der Karte als Haltestellenmarkierungen angezeigt. Marker für abgeschlossene Aufgaben in einem anderen Stil angezeigt wird geplante Haltestellen.

Die Position der Aufgabenergebnisse wird mit Aufgabenergebnismarkierungen angezeigt. Aufgaben, deren Ergebnis ERFOLGREICH ist, werden mit Markierungen für erfolgreiche Aufgaben angezeigt, während alle anderen Aufgaben mit Markierungen für nicht erfolgreiche Aufgaben angezeigt werden.

Erste Schritte mit der JavaScript-Flotten-Tracking-Bibliothek

Bevor Sie die JavaScript-Flotten-Tracking-Bibliothek verwenden, stellen Sie sicher, dass Sie sind mit Fleet Engine vertraut und mit dem Abrufen eines API-Schlüssels. Erstellen Sie dann eine Aufgaben-ID und einen Anspruch auf die Fahrzeug-ID des Lieferfahrzeugs.

Aufgaben-ID und Anspruch auf Lieferfahrzeug-ID erstellen

Um Lieferfahrzeuge mit dem Standortanbieter für Lieferfahrzeuge zu verfolgen, ein JSON Web Token (JWT) mit einer Aufgaben-ID und einem Claim zur Auslieferungsfahrzeug-ID erstellen

Fügen Sie zum Erstellen der JWT-Nutzlast im Autorisierungsabschnitt eine zusätzliche Anforderung hinzu mit den Schlüsseln taskid und deliveryvehicleid und legen Sie den Wert fest. jedes Schlüssels an *. Das Token sollte mit der Fleet Engine erstellt werden. Dienst-Superuser. Beachten Sie, dass Sie hiermit umfassenden Zugriff zum Erstellen, Lesen und Ändern von Fleet Engine-Entitäten. mit vertrauenswürdigen Nutzern.

Das folgende Beispiel zeigt, wie du ein Token für das Tracking nach Fahrzeugen erstellst 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": {
     "taskid": "*",
     "deliveryvehicleid": "*",
   }
}

Abruf von Authentifizierungstokens erstellen

Sie können einen Abrufer für Authentifizierungstokens erstellen, um ein Miniertes Token abzurufen. mit den entsprechenden Anforderungen auf Ihren Servern über einen Dienst, Kontozertifikat für Ihr Projekt. Es ist wichtig, nur Tokens zu erstellen. auf Ihren Servern und geben Sie Ihre Zertifikate niemals an Clients weiter. Andernfalls gefährden Sie die Sicherheit Ihres Systems.

Der Fetcher muss eine Datenstruktur zurückgeben. 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.

Die JavaScript Fleet Tracking Library fordert über die 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.

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

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
  };
}

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 Beispiel oben als data.ExpiresInSeconds angegeben.
• Beim Abrufen von Authentifizierungstokens muss die Ablaufzeit (in Sekunden, ab dem Zeitpunkt des Abrufs) in die Bibliothek übertragen, wie im Beispiel gezeigt.
• SERVER_TOKEN_URL hängt von Ihrer Back-End-Implementierung ab. Dies sind die URLs für das Back-End der Beispiel-App: <ph type="x-smartling-placeholder">
  </ph>
  • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
  • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
  • https://SERVER_URL/token/fleet_reader

Karte aus HTML laden

Das folgende Beispiel zeigt, wie das Teilen von JavaScript-Recherchen geladen wird Bibliothek von einer angegebenen URL abzurufen. Der callback-Parameter führt die initMap aus. nachdem die API geladen wurde. Mit dem Attribut defer kann der Browser Fahren Sie mit dem Rendern des Rests der Seite fort, während die API geladen wird.

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

Einem Lieferfahrzeug folgen

In diesem Abschnitt wird beschrieben, wie Sie die JavaScript-Flotten-Tracking-Bibliothek verwenden einem Lieferfahrzeug zu folgen. Achten Sie darauf, Bibliothek aus der im Script-Tag angegebenen Callback-Funktion laden bevor Sie den Code ausführen.

Anbieter eines Standorts für Lieferfahrzeuge instanziieren

In der JavaScript-Flotten-Tracking-Bibliothek ist ein Standortanbieter vordefiniert für die Fleet Engine Deliveries API. Verwenden Sie Ihre Projekt-ID und einen Verweis auf Ihre Token-Factory, um sie zu instanziieren.

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

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

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

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

Kartenansicht initialisieren

Nach dem Laden der Bibliothek für das Teilen von Kaufprozessen initialisieren Kartenansicht und fügen sie der HTML-Seite hinzu. Ihre Seite sollte Folgendes enthalten: Ein &lt;div&gt;-Element, das die Kartenansicht enthält Das &lt;div&gt;-Element heißt im folgenden Beispiel map_canvas.

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 delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-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);

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 delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-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

Sie können Metainformationen zu einer Aufgabe aus dem deliveryVehicle-Objekt abrufen mithilfe des Standortanbieters. Die Metainformationen umfassen die voraussichtliche Ankunftszeit und verbleibende Strecke bis zur nächsten Abholung oder Abgabe. Änderungen den Metainformationen wird ein update-Ereignis ausgelöst. Im folgenden Beispiel zeigt, wie auf diese Änderungsereignisse gewartet wird.

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

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

Auf Fehler warten

Fehler, die asynchron durch das Anfordern von Informationen zu Lieferfahrzeugen auftreten Fehlerereignisse. Das folgende Beispiel zeigt, wie auf diese Ereignisse gewartet wird um Fehler zu beheben.

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

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

Nicht mehr beobachten

Wenn der Standortanbieter das Paket nicht mehr verfolgen soll, entfernen Sie die vom Standortanbieter.

locationProvider.deliveryVehicleId = '';

locationProvider.deliveryVehicleId = '';

Standortanbieter aus der Kartenansicht entfernen

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

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Lieferflotte ansehen

In diesem Abschnitt wird beschrieben, wie Sie die Bibliothek für das Teilen von JavaScript-Recherchen verwenden um eine Lieferflotte anzuzeigen. Achten Sie darauf, Bibliothek aus der im Script-Tag angegebenen Callback-Funktion laden bevor Sie den Code ausführen.

Standortanbieter für Lieferflotten instanziieren

In der JavaScript-Flotten-Tracking-Bibliothek ist ein Standortanbieter vordefiniert, der mehrere Fahrzeuge aus der FleetEngine Deliveries API Verwenden Sie Ihr Projekt-ID und einen Verweis auf Ihren Token-Abruf, um ihn zu instanziieren.

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

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

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

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleFilter gibt eine Abfrage zum Filtern von Fahrzeugen an, die auf auf der Karte. Dieser Filter wird direkt an Fleet Engine übergeben. Weitere Informationen finden Sie unter ListDeliveryVehiclesRequest.filter für unterstützte Formate.

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. Standortermittlung beginnt erst, wenn dieser Wert festgelegt wurde.

Sobald der Standortanbieter eingerichtet ist, die Kartenansicht initialisieren.

Standortbeschränkung mithilfe des Darstellungsbereichs der Karte festlegen

Die locationRestriction-Grenzen können so konfiguriert werden, dass sie dem aktuellen Gebiet entsprechen. die in der Kartenansicht sichtbar sind.

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

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 der deliveryVehicles abrufen mithilfe des Standortanbieters. Die Meta-Informationen enthalten Angaben zum Fahrzeug Eigenschaften wie Navigationsstatus, verbleibende Entfernung und benutzerdefinierte Attribute; Siehe Referenzdokumentation . Eine Änderung an den Metainformationen löst ein update-Ereignis aus. Die Das folgende Beispiel zeigt, wie auf diese Änderungsereignisse gewartet wird.

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

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

Auf Fehler warten

Fehler, die asynchron durch das Anfordern von Informationen zur Bereitstellungsflotte auftreten Fehlerereignisse auslösen. Beispiele für das Überwachen dieser Ereignisse finden Sie unter zu Auf Fehler warten.

Nicht mehr beobachten

Legen Sie Grenzen fest, um zu verhindern, dass der Standortanbieter die Lieferflotte verfolgt des Standortanbieters auf null setzen.

locationProvider.locationRestriction = null;

locationProvider.locationRestriction = null;

Standortanbieter aus der Kartenansicht entfernen

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

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Lieferfahrzeug verfolgen und Lieferflotte ansehen

In der Ansicht einer Flotte können Sie die Route und bevorstehende Aufgaben für eine bestimmte Lieferfahrzeug. Instanziieren Sie dazu sowohl einen Standort der Lieferflotte Anbieter und Lieferunternehmen und fügen Sie beide der Kartenansicht:

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

Der Standortanbieter für Lieferflotten beginnt, Lieferfahrzeuge anzuzeigen auf auf der Karte. Anpassung von Markierungen verwenden, um den Standort des Lieferfahrzeugs zu aktivieren Anbieter, um ein Lieferfahrzeug zu verfolgen, wenn auf seine Flottenmarkierung geklickt wurde:

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

Markierung vor dem Standortanbieter des Lieferfahrzeugs ausblenden, um das Rendern zu verhindern zwei Markierungen für dasselbe Fahrzeug:

// Specify the customization function either separately, or as a field in 
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

Design der Basiskarte anpassen

Um das Design der Google Maps-Komponente anzupassen, Karten gestalten oder indem Sie 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. Bis einen Stil auf Ihre JavaScript-Flotten-Tracking-Karte anwenden, mapId beim Erstellen der JourneySharingMapView. Das Feld „mapId“ kann nicht geändert werden oder hinzugefügt werden, nachdem JourneySharingMapView instanziiert wurde. Die folgenden Beispiels zeigt, wie Sie einen zuvor erstellten Kartenstil mit einem Karten-ID.

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

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, wenn Sie JourneySharingMapView erstellen.

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

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.

Die einfachste Anpassung besteht darin, MarkerOptions -Objekt, das auf alle Markierungen desselben Typs angewendet wird. Die Änderungen die im -Objekt angegeben sind, werden angewendet, nachdem die einzelnen Markierungen erstellt wurden. Standardoptionen überschreiben.

Eine erweiterte Option besteht darin, eine Anpassungsfunktion anzugeben. Anpassung -Funktionen ermöglichen die Gestaltung von Markierungen basierend auf Daten sowie das Hinzufügen von Interaktivität von Markierungen, wie z. B. Klickhandhabung. Insbesondere Flottenverfolgung Übergibt Daten an die Anpassungsfunktion für den Typ des Objekts, auf das sich die Markierung bezieht. steht für Fahrzeug, Haltestelle oder Aufgabe. Dadurch kann der Markierungsstil basierend auf dem aktuellen Status des Markierungselements selbst; zum Beispiel die Zahl der verbleibenden Haltestellen oder der Art der Aufgabe. Sie können sogar Daten aus Quellen zusammenführen außerhalb von Fleet Engine erstellen und die Markierung basierend auf diesen Informationen gestalten.

Außerdem können Sie mithilfe von Anpassungsfunktionen die Sichtbarkeit von Markierungen filtern. Rufen Sie dazu setVisible(false) auf der Markierung.

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

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

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

Den Stil von Markierungen mit MarkerOptions ändern

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

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  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.

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

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.

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

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    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.

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

Polylinienanpassungen verwenden, wenn Sie einem Lieferfahrzeug folgen

Mit der JavaScript-Flotten-Tracking-Bibliothek können Sie auch das Erscheinungsbild der Route des Fahrzeugs 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 Fahrzeug ändern Bundesstaat; Sie können z. B. das Polyline-Objekt in einer dunkleren Schattierung einfärben oder wird es dicker, wenn das Fahrzeug langsamer ist. Sie können sogar aus verschiedenen Quellen außerhalb von Fleet Engine zu erstellen und das Polyline-Objekt basierend darauf zu gestalten Informationen.

Sie können die Anpassungen mithilfe der Parameter in den FleetEngineDeliveryVehicleLocationProviderOptions 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:

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

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.

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

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

Den Stil von Polyline-Objekten mithilfe von Anpassungsfunktionen ändern

Das folgende Beispiel zeigt, wie der Stil für eine aktive Polylinie konfiguriert wird mithilfe einer Anpassungsfunktion. Folgen Sie diesem Muster, um die Stil eines beliebigen Polyline-Objekts unter Verwendung einer der Polylinien-Anpassungen die zuvor aufgeführten Parameter.

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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'});
      }
    }
  };

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

InfoWindow für eine Fahrzeug- oder Standortmarkierung anzeigen

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

Das folgende Beispiel zeigt, wie Sie eine InfoWindow erstellen und anhängen. Fahrzeugmarkierung hinzufügen.

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

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

    // 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();

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

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 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 angepasst wird und berechnet die Route, indem Sie die automatische Anpassung deaktivieren. Im folgenden Beispiel zeigt, wie Sie die automatische Anpassung beim Konfigurieren der Freigabe der Reise deaktivieren Kartenansicht.

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

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 Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // 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 Uluru
  var marker = new google.maps.Marker({position: uluru, 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 FleetEngineDeliveryVehicleLocationProvider
  // as appropriate.
  locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
    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.deliveryVehicleId = DELIVERY_VEHICLE_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // 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 Uluru
    var marker = new google.maps.Marker({position: uluru, 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">
    </script>
  </body>
</html>

Wenn Sie ein Lieferfahrzeug mit der ID in der Nähe von Uluru angegeben haben, wird sie jetzt auf der Karte gerendert.