Diese Seite wurde von der Cloud Translation API übersetzt.

Reisen in JavaScript verfolgen

Plattform auswählen: Android iOS JavaScript

Wenn Sie einer Fahrt folgen, wird dem Nutzer in Ihrer Consumer-App der Standort des entsprechenden Fahrzeugs angezeigt. Dazu muss Ihre App die Fahrt verfolgen, den Fortschritt während der Fahrt aktualisieren und die Fahrt beenden, wenn sie abgeschlossen ist.

In diesem Dokument werden die folgenden wichtigen Schritte dieses Prozesses behandelt:

Karte einrichten
Karte initialisieren und geteilte Reise anzeigen
Aktualisieren und Fahrtfortschritt verfolgen
Einer Reise nicht mehr folgen
Fehler bei Fahrten beheben

Karte einrichten

Wenn Sie die Abholung oder Zustellung einer Sendung in Ihrer Web-App verfolgen möchten, müssen Sie eine Karte laden und das Consumer SDK instanziieren, um die Fahrt zu verfolgen. Sie können entweder eine neue Karte laden oder eine vorhandene verwenden. Anschließend instanziieren Sie das Consumer SDK mit der Initialisierungsfunktion, damit die Kartenansicht dem Standort des verfolgten Artikels entspricht.

Neue Karte mit der Google Maps JavaScript API laden

Um eine neue Karte zu erstellen, laden Sie die Google Maps JavaScript API in Ihre Web-App. Im folgenden Beispiel wird gezeigt, wie Sie die Google Maps JavaScript API laden, das SDK aktivieren und die Initialisierungsprüfung auslösen.

Der Parameter callback führt die Funktion initMap aus, nachdem die API geladen wurde.
Mit dem Attribut defer kann der Browser den Rest Ihrer Seite weiter rendern, während die API geladen wird.

Verwenden Sie die Funktion initMap, um das Consumer SDK zu instanziieren. Beispiel:

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

Vorhandene Karte laden

Sie können auch eine vorhandene Karte laden, die mit der Google Maps JavaScript API erstellt wurde, z. B. eine Karte, die Sie bereits verwenden.

Angenommen, Sie haben eine Webseite mit einer Standard-google.maps.Map-Einheit, auf der eine Markierung wie im folgenden HTML-Code definiert angezeigt wird. Hier sehen Sie Ihre Karte mit derselben initMap-Funktion im Callback am Ende:

    <!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 Pier 39 in San Francisco
          var pier39 = {lat: 37.809326, lng: -122.409981};
          // 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 Pier 39
          var marker = new google.maps.Marker({position: pier39, map: map});
        }
        </script>
        <!-- Load the API from the specified URL.
           * The defer attribute allows the browser to render the page while the API loads.
           * The key parameter contains your own API key.
           * 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>

Vorhandene Karte ersetzen

Sie können eine vorhandene Karte mit Markierungen oder anderen Anpassungen ersetzen, ohne dass diese Anpassungen verloren gehen.

Wenn Sie beispielsweise eine Webseite mit einer Standard-google.maps.Map-Einheit haben, auf der eine Markierung angezeigt wird, können Sie die Karte ersetzen und die Markierung beibehalten. In diesem Abschnitt wird beschrieben, wie Sie das tun.

Wenn Sie die Karte ersetzen und Anpassungen beibehalten möchten, fügen Sie die Funktion zum Teilen von Routen mit den folgenden Schritten in Ihre HTML-Seite ein. Diese Schritte sind auch im folgenden Beispiel nummeriert:

Fügen Sie Code für die Authentifizierungstoken-Factory hinzu.
Initialisieren Sie einen Standortanbieter in der Funktion initMap().
Initialisieren Sie die Kartenansicht in der Funktion initMap(). Die Ansicht enthält die Karte.
Verschieben Sie die Anpassung in die Callback-Funktion für die Initialisierung der Kartenansicht.
Fügen Sie die Standortbibliothek dem API-Loader hinzu.

Das folgende Beispiel zeigt die vorzunehmenden Änderungen. Wenn Sie eine Fahrt mit der angegebenen ID in der Nähe von Uluru durchführen, wird sie jetzt auf der Karte gerendert:

    <!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
    async 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.
      locationProvider = new google.maps.journeySharing.FleetEngineTripLocationProvider({
        projectId: "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
      });

      locationProvider.tripId = TRIP_ID;

        // (4) Add customizations like before.

        // The location of Pier 39 in San Francisco
        var pier39 = {lat: 37.809326, lng: -122.409981};
        // 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 Pier 39
        var marker = new google.maps.Marker({position: pier39, 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 SDK to the API loader.
        -->
        <script defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
        </script>
      </body>
    </html>

Karte initialisieren und Fortschritt der Fahrt anzeigen

Wenn eine Fahrt beginnt, muss Ihre App einen Anbieter für den Fahrtstandort instanziieren und dann eine Karte initialisieren, um den Fahrtfortschritt zu teilen. In den folgenden Abschnitten finden Sie Beispiele.

Standortanbieter für Fahrten instanziieren

Das JavaScript SDK enthält einen vordefinierten Standortanbieter für die Fleet Engine Ridesharing API. Verwenden Sie Ihre Projekt-ID und einen Verweis auf Ihre Token Factory, um sie zu instanziieren.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

Kartenansicht initialisieren

Nachdem Sie das JavaScript SDK 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 <div>-Element hat im folgenden Beispiel den Namen 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 trip ID in the location
// provider constructor, you may do so here.
// Location tracking starts as soon as this is set.
locationProvider.tripId = 'your-trip-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 choose.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

TypeScript

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 trip ID in the location
// provider constructor, you may do so here.
// Location tracking starts as soon as this is set.
locationProvider.tripId = 'your-trip-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 choose.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

Aktualisieren und Fahrtfortschritt verfolgen

Ihre App sollte auf Ereignisse warten und den Fortschritt der Fahrt aktualisieren, wenn die Fahrt voranschreitet. Sie können Metainformationen zu einer Fahrt über das Aufgabenobjekt mit dem Standortanbieter abrufen. Die Meta-Informationen umfassen die voraussichtliche Ankunftszeit und die verbleibende Entfernung bis zur Abholung oder zum Absetzen. Änderungen an den Metainformationen lösen ein update-Ereignis aus. Das folgende Beispiel zeigt, wie Sie auf diese Änderungsereignisse reagieren können.

JavaScript

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

TypeScript

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

Einer Reise nicht mehr folgen

Wenn die Fahrt beendet ist, müssen Sie die Standortfreigabe für die Fahrt beenden. Dazu entfernen Sie die Fahrt-ID und den Standortanbieter. Beispiele finden Sie in den folgenden Abschnitten.

Entfernen Sie die Fahrt-ID vom Standortanbieter.

Im folgenden Beispiel wird gezeigt, wie eine Fahrt-ID aus dem Standortanbieter entfernt wird.

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

Standortanbieter aus der Kartenansicht entfernen

Das folgende Beispiel zeigt, wie ein Standortanbieter aus der Kartenansicht entfernt wird.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Fehler bei Fahrten beheben

Fehler, die asynchron beim Anfordern von Fahrtinformationen auftreten, lösen Fehlerereignisse aus. Im folgenden Beispiel sehen Sie, wie Sie auf diese Ereignisse warten, um Fehler zu beheben.

JavaScript

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

TypeScript

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

Nächste Schritte

Karte gestalten

Reisen in JavaScript verfolgen Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Karte einrichten

Neue Karte mit der Google Maps JavaScript API laden

Vorhandene Karte laden

Vorhandene Karte ersetzen

Karte initialisieren und Fortschritt der Fahrt anzeigen

Standortanbieter für Fahrten instanziieren

JavaScript

TypeScript

Kartenansicht initialisieren

JavaScript

TypeScript

Aktualisieren und Fahrtfortschritt verfolgen

JavaScript

TypeScript

Einer Reise nicht mehr folgen

Entfernen Sie die Fahrt-ID vom Standortanbieter.

JavaScript

TypeScript

Standortanbieter aus der Kartenansicht entfernen

JavaScript

TypeScript

Fehler bei Fahrten beheben

JavaScript

TypeScript

Nächste Schritte

Reisen in JavaScript verfolgen