Śledź pojazd

W tej sekcji pokazujemy, jak za pomocą biblioteki śledzenia JavaScriptu śledzić do podróży na żądanie lub zaplanowanych zadań.

Aby śledzić pojazd:

  1. Wczytanie biblioteki i zainicjowanie widoku mapy
  2. Udostępnianie lokalizacji pojazdu i widoku mapy
  3. Wykrywanie zdarzeń i obsługa błędów
  4. Przestań śledzić

Wczytanie biblioteki i zainicjowanie widoku mapy

Aby wyświetlić operacje floty na mapie na stronie internetowej, użyj skrypt wywołujący mapę za pomocą klucza interfejsu API. Ten przykład pokazuje, w tym celu z poziomu HTML:

  • Źródło adresu URL: wywołuje interfejs API Map Google, aby przesłać żądanie mapy przy użyciu klucza interfejsu API.

  • Parametr callback: uruchamia funkcję initMap po zwróceniu wywołania przez interfejs API.

  • Parametr libraries: wczytuje bibliotekę śledzenia floty.

  • Atrybut defer: pozwala przeglądarce kontynuować renderowanie pozostałej części podczas wczytywania interfejsu API.

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

Udostępnianie lokalizacji pojazdu i widoku mapy

Aby zacząć śledzić pojazd, zarówno Ty, jak i osoba musicie utworzyć instancję dostawcy lokalizacji pojazdu i zainicjować widok mapy z identyfikatorem pojazdu w sposób opisany poniżej. sekcji.

Utwórz instancję dostawcy lokalizacji pojazdu

Biblioteka śledzenia floty JavaScript zawiera dostawcę lokalizacji dla floty Engine API. Użyj identyfikatora projektu i odwołania do modułu pobierania tokenów aby utworzyć jego instancję w sposób podany w następujących przykładach.

Podróże na żądanie

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

Zaplanowane zadania

JavaScript

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

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

TypeScript

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

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

Inicjowanie widoku mapy

Po wczytaniu biblioteki udostępniania czynności JavaScript zainicjuj ją. widok mapy i dodać go do strony HTML. Strona powinna zawierać element &lt;div&gt; zawierający widok mapy. Element &lt;div&gt; w poniższych przykładach ma nazwę map_canvas.=

Podróże na żądanie

JavaScript

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

// 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 want.
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],
});

// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Zaplanowane zadania

JavaScript

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

// 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 want.
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],
});

// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Wykrywaj zdarzenia i obsługuj błędy

Po rozpoczęciu śledzenia pojazdu chcesz zaktualizować jego postępy na mapie i eliminować błędy w czasie, gdy pojazd porusza się po swojej trasie.

Nasłuchuj zdarzeń dotyczących pojazdów

Aby śledzić postęp pojazdu w przypadku podróży na żądanie lub zaplanowanych zadań: musisz nasłuchiwać zdarzeń zmian.

Metatag jest pobierany z obiektu vehicle lub deliveryVehicle za pomocą dostawcy lokalizacji. Metadane obejmują szacowany czas dotarcia na miejsce i pozostałą odległość przed następnym odbiorem lub zwrotem pojazdu. Zmiany metadanych wywołać zdarzenie update u dostawcy lokalizacji.

Z przykładu poniżej dowiesz się, jak nasłuchiwać zdarzeń zmian.

Podróże na żądanie

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

Zaplanowane zadania

JavaScript

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

TypeScript

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

Obsługa błędów

Po wczytaniu biblioteki udostępniania czynności JavaScript zainicjuj ją. widok mapy i dodać go do strony HTML. Strona powinna zawierać element &lt;div&gt; zawierający widok mapy. Element &lt;div&gt; w poniższych przykładach ma nazwę map_canvas.=

Podróże na żądanie

JavaScript

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

// 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 want.
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],
});

// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Zaplanowane zadania

JavaScript

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

// 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 want.
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],
});

// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Przestań śledzić pojazd

Aby przestać śledzić pojazd, musisz usunąć go u dostawcy lokalizacji. usunąć dostawcę lokalizacji z widoku mapy w sposób opisany poniżej sekcji. Podane tu przykłady dotyczą zarówno podróży na żądanie, jak i zaplanowanych zadań implementacji.

Usuwanie pojazdu u dostawcy lokalizacji

Aby uniemożliwić dostawcy lokalizacji śledzenie pojazdu, usuń identyfikator pojazdu dostawy.

Podróże na żądanie

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Zaplanowane zadania

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

Usuń dostawcę lokalizacji z widoku mapy

Poniższy przykład pokazuje, jak usunąć dostawcę lokalizacji z widoku mapy.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Co dalej?