Wyświetlanie floty

W tej sekcji pokazujemy, jak wyświetlać flotę za pomocą biblioteki śledzenia JavaScriptu. W tych procedurach zakładamy, że masz skonfigurowaną bibliotekę śledzenia floty i załadowaną mapę. Szczegółowe informacje znajdziesz w artykule Konfigurowanie biblioteki śledzenia floty w JavaScript.

W tym dokumencie omawiamy następujące czynności, które można zrobić podczas przeglądania floty:

1. Zacznij śledzić flotę.
2. Wykrywaj zdarzenia i obsługuj błędy.
3. Przestań śledzić.
4. Śledź 1 pojazd podczas wyświetlania floty.

Zacznij śledzić flotę

Aby śledzić flotę, musisz utworzyć instancję dostawcy lokalizacji floty i ustawić ograniczenia lokalizacji dla widoku mapy zgodnie z opisem w następnych sekcjach.

Tworzenie wystąpienia dostawcy danych o lokalizacji floty

Biblioteka śledzenia floty JavaScript zawiera dostawcę lokalizacji, który pobiera wiele pojazdów z Fleet Engine.

Aby utworzyć instancję, wykonaj te czynności:

1. Użyj identyfikatora projektu oraz odwołania do pobierania tokenów.

2. Używanie zapytania filtra pojazdu Zapytanie filtra pojazdu określa, które pojazdy są wyświetlane na mapie. Filtr jest przekazywany do Fleet Engine.

   • W przypadku usług na żądanie użyj vehicleFilter i zapoznaj się z ListVehiclesRequest.filter.
   • W przypadku zadań zaplanowanych używaj deliveryVehicleFilter i sprawdzaj ListDeliveryVehiclesRequest.filter

3. Ustaw obszar ograniczający wyświetlanie pojazdu. Użyj opcji locationRestriction, aby ograniczyć obszar wyświetlania pojazdów na mapie. Dopóki nie skonfigurujesz tego ustawienia, usługa lokalizacji nie będzie aktywna. Granice lokalizacji możesz ustawiać w konstruktorze lub za nim.

4. Inicjowanie widoku mapy.

Poniższe przykłady pokazują, jak utworzyć instancję dostawcy lokalizacji floty w przypadku zarówno scenariuszy na żądanie, jak i z harmonogramem. Przykłady pokazują też, jak użyć parametru locationRestriction w konstruktorze, aby aktywować dostawcę lokalizacji.

Przejazdy na żądanie

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

Zaplanowane zadania

JavaScript

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

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          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"',
        });

TypeScript

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

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          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"',
        });

Aby ustawić locationRestriction po konstruktorze, dodaj locationProvider.locationRestriction później w kodzie, jak pokazano w tym przykładzie kodu JavaScript.

Uwaga: ten przykład dotyczy zaplanowanych zadań, ale w przypadku podróży na żądanie należy użyć polecenia google.maps.journeySharing.FleetEngineFleetLocationProvider.

   // You can choose to not set locationRestriction in the constructor.
   // In this case, the location provider *DOES NOT START* after this line, because
   // no locationRestriction is set.
   locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
   ... // not setting locationRestriction here
   });

   // You can then set the locationRestriction *after* the constructor.
   // After this line, the location provider is active.
   locationProvider.locationRestriction = {
     north: 1,
     east: 2,
     south: 0,
     west: 1,
   };

Ustawianie ograniczenia lokalizacji za pomocą widocznego obszaru mapy

Możesz też ustawić granice locationRestriction, aby odpowiadały obszarowi widocznemu w widoku mapy.

Przejazdy na żądanie

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

Zaplanowane zadania

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 provider 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 provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Inicjowanie widoku mapy

Po utworzeniu dostawcy lokalizacji zainicjuj widok mapy w taki sam sposób jak podczas śledzenia pojedynczego pojazdu.

Po wczytaniu biblioteki JavaScript Journey Sharing zainicjuj widok mapy i dodaj go do strony HTML. Strona powinna zawierać element <div>, który zawiera widok mapy. W poniższych przykładach element <div> ma nazwę map_canvas.=

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

Nasłuchiwanie zdarzeń i obsługa błędów

Po rozpoczęciu śledzenia floty musisz sprawdzać zmiany zdarzeń i rozpatrywać wszelkie błędy zgodnie z opisem w następnych sekcjach.

Wykrywaj zdarzenia zmian

Za pomocą dostawcy lokalizacji możesz pobierać metadane o flotach z obiektu pojazdu. Zmiany w metainformacjach powodują zdarzenie update. Metadane obejmują właściwości pojazdu takie jak stan nawigacji, pozostała odległość i atrybuty niestandardowe.

Szczegółowe informacje można znaleźć w następujących dokumentach:

• Informacje o opcjach pojazdów dostępnych na żądanie
• Informacje o opcjach pojazdu w przypadku zadań zaplanowanych

W przykładach poniżej pokazujemy, jak wsłuchiwać się w zdarzenia zmian.

Podróże na żądanie

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  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);
    }
  }
});

Zaplanowane zadania

JavaScript

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

TypeScript

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

Wykrywaj błędy

Przyda Ci się też wykrywanie błędów, które pojawiają się podczas jazdy pojazdem, i rozwiązywanie związanych z nimi problemów. Błędy, które występują asynchronicznie z powodu żądania informacji o pojazdach, powodują zdarzenia błędu.

Z przykładu poniżej dowiesz się, jak nasłuchiwać tych zdarzeń, aby móc reagować na błędy.

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

Przestań śledzić flotę

Aby zatrzymać śledzenie floty, ustaw granice dostawcy lokalizacji na wartość null, a następnie usuń dostawcę lokalizacji z widoku mapy w sposób opisany w kolejnych sekcjach.

Ustaw granice dostawcy lokalizacji na wartość null

Aby zatrzymać śledzenie floty przez dostawcę lokalizacji, ustaw jego granice na wartość null.

Przejazdy na żądanie

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Zaplanowane zadania

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Usuń dostawcę lokalizacji z widoku mapy

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Śledź pojazd dostawczy, wyświetlając flotę dostawczą

Jeśli używasz usług mobilnych do zaplanowanych zadań, możesz wyświetlić flotę oraz trasę i nadchodzące zadania dla konkretnego pojazdu dostawy w tym samym widoku mapy. Aby to zrobić, utwórz instancję dostawcy lokalizacji floty dostawczej i dostawcy lokalizacji pojazdu dostawczego, a następnie dodaj je do widoku mapy. Po utworzeniu wystąpienia dostawca lokalizacji floty zaczyna wyświetlać na mapie pojazdy dostawcze. W przykładach poniżej pokazujemy, jak utworzyć wystąpienia obu dostawców lokalizacji:

JavaScript

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

TypeScript

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

Śledzenie pojazdu dostawczego za pomocą dostosowywanego znacznika

Aby umożliwić dostawcy lokalizacji pojazdu dostawy śledzenie pojazdu dostawy po kliknięciu jego znacznika floty, wykonaj te czynności:

1. Dostosuj znacznik i dodaj działanie kliknięcia.

2. Ukryj znacznik, aby uniknąć powielania znaczników.

   Uwaga: dostawca lokalizacji floty dostaw generuje zestaw znaczników, po jednym dla każdego śledzonego pojazdu. Jeśli chcesz wyświetlać szczegóły 1 pojazdu, gdy użytkownik kliknie ten pojazd, utwórz instancję dostawcy lokalizacji pojazdu dostawy i ustaw identyfikator pojazdu jako identyfikator, który kliknął użytkownik, jak pokazano w przykładzie poniżej. Gdy to zrobisz, dostawca lokalizacji pojazdu dostawczego również wyświetli znacznik dla tego pojazdu (zgodnie z jego przeznaczeniem). Ukrywa więc jeden z nich, aby nie było dwóch znaczników dla tego samego pojazdu.

Przykłady tych czynności znajdziesz w następnych sekcjach.

Dostosowywanie znacznika i dodawanie działania po kliknięciu

JavaScript

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

TypeScript

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

ukryć znacznik, aby uniknąć powielania znaczników;

Ukryj znacznik dostawy od dostawcy lokalizacji pojazdu, aby zapobiec renderowaniu dwóch znaczników dla tego samego pojazdu:

JavaScript

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

TypeScript

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

Co dalej?

• Zmienianie stylu mapy