Reisen in JavaScript verfolgen

Plattform auswählen: Android iOS JavaScript

Wenn Sie einen Kaufprozess teilen, zeigt Ihre App den Standort des am besten geeignet ist. Dazu muss deine App die Freigabe starten den Reisefortschritt aktualisieren und die Freigabe der nach Abschluss der Fahrt.

In diesem Dokument werden die folgenden wichtigen Schritte in diesem Prozess behandelt:

  1. Karte einrichten
  2. Karte initialisieren und die gemeinsame Route anzeigen
  3. Aktualisieren und Streckenfortschritt verfolgen
  4. Teilen der Reise beenden
  5. Fehler bei der Freigabe des Kaufprozesses beheben

Karte einrichten

Wenn Sie die Abholung oder Lieferung einer Sendung in Ihrer Web-App verfolgen möchten, müssen Sie eine Karte laden und instanziieren Sie das Consumer SDK, um mit dem Tracking des Kaufprozesses zu beginnen. Du kannst Folgendes laden: eine neue Karte zu erstellen oder eine vorhandene zu verwenden. Dann verwenden Sie die Initialisierung um das Consumer SDK zu instanziieren, sodass die Kartenansicht dem Standort des beobachteten Artikels.

Neue Karte mithilfe der Google Maps JavaScript API laden

Laden Sie zum Erstellen einer neuen Karte die Google Maps JavaScript API in Ihre Webanwendung. Die Im folgenden Beispiel wird gezeigt, wie Sie die Google Maps JavaScript API laden, die Methode SDK und lösen Sie die Initialisierungsprüfung aus.

  • Mit dem Parameter callback wird die Funktion initMap ausgeführt, nachdem die API geladen wurde.
  • Mithilfe des Attributs defer kann der Browser den Rest Ihrer 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, die Sie bereits nutzen.

Beispiel: Du hast eine Webseite mit einer standardmäßigen google.maps.Map. Entität, für die eine Markierung angezeigt wird, wie im folgenden HTML-Code definiert. Dieses zeigt Ihre Karte mit derselben initMap-Funktion im Callback am Ende an:

    <!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 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. für die eine Markierung angezeigt wird, können Sie die Karte ersetzen und zur Markierung. In diesem Abschnitt werden die dazu erforderlichen Schritte beschrieben.

Um die Karte zu ersetzen und Anpassungen vorzunehmen, fügen Sie die Funktion „Teilen von Reisen“ zu Ihre HTML-Seite mit diesen Schritten bearbeiten, die auch im Beispiel unten nummeriert sind. folgt:

  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. Wenn Sie eine Fahrt mit angegebene ID in der Nähe von Uluru hat, 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 die gemeinsame Route anzeigen

Zu Beginn einer Fahrt muss Ihre App einen Anbieter für die Fahrtortung instanziieren und anschließend eine Karte initialisieren, um mit dem Teilen der Reise zu beginnen. Weitere Informationen finden Sie in den folgenden Abschnitten. .

Anbieter von Reisezielen instanziieren

Das JavaScript SDK hat 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

Initialisieren Sie nach dem Laden des JavaScript SDK. Kartenansicht und fügen sie der HTML-Seite hinzu. Ihre Seite sollte Folgendes enthalten: Ein <div>-Element, das die Kartenansicht enthält. Das <div>-Element heißt im folgenden Beispiel map_canvas.

JavaScript

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

// If you did not specify a 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 Streckenfortschritt verfolgen

Deine App sollte auf Ereignisse warten und den Fahrtfortschritt als Fahrt aktualisieren voranschreitet. Sie können Metainformationen zu einer Fahrt aus dem Aufgabenobjekt abrufen mithilfe des Standortanbieters. Die Metainformationen umfassen die voraussichtliche Ankunftszeit und verbleibende Strecke vor dem Start oder der Abgabe. Änderungen an den Metainformationen Ein update-Ereignis wird ausgelöst. Das folgende Beispiel zeigt, wie Sie sich diese Änderungsereignisse.

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

Teilen der Reise beenden

Wenn die Fahrt endet, müssen Sie den Standortanbieter daran hindern, die Fahrt. Entfernen Sie dazu die Fahrt-ID und Standortanbieter. Beispiele finden Sie in den folgenden Abschnitten.

Reise-ID vom Standortanbieter entfernen

Das folgende Beispiel zeigt, wie Sie eine Fahrt-ID vom Standortanbieter entfernen.

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

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

Fehler bei der Freigabe des Kaufprozesses beheben

Fehler, die asynchron durch das Anfordern von Fahrtinformationen auftreten Fehlerereignisse. Das folgende Beispiel zeigt, wie auf diese Ereignisse gewartet wird Fehler 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