Rastrear um veículo

Esta seção mostra como usar a biblioteca de rastreamento de frota JavaScript para rastrear um veículo em viagens sob demanda ou tarefas agendadas.

Para rastrear um veículo, siga estas etapas:

  1. Carregar a biblioteca e inicializar a visualização do mapa
  2. Fornecer a localização do veículo e a visualização do mapa
  3. Ouvir eventos e processar erros
  4. Parar o rastreamento

Carregar a biblioteca e inicializar a visualização do mapa

Para mostrar as operações da frota em um mapa na página da Web, use um script que chame um mapa usando sua chave de API. O exemplo a seguir mostra como fazer isso no HTML:

  • Origem do URL: chama a API Google Maps para solicitar um mapa usando sua chave de API.

  • Parâmetro callback: executa a função initMap depois que a API retorna a chamada.

  • Parâmetro libraries: carrega a biblioteca de rastreamento de frota.

  • Atributo defer: permite que o navegador continue renderizando o restante da página enquanto a API é carregada.

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

Fornecer a localização do veículo e a visualização do mapa

Para começar a rastrear um veículo, instancie um provedor de localização de veículo e inicialize uma visualização do mapa com o ID do veículo, conforme descrito nas seções a seguir.

Instanciar um provedor de localização de veículo

A biblioteca de rastreamento de frota JavaScript inclui um provedor de localização para a API Fleet Engine. Use o ID do projeto e uma referência ao buscador de tokens para instanciá-lo, conforme mostrado nos exemplos a seguir.

Viagens sob demanda

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

Tarefas agendadas

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

Inicializar a visualização do mapa

Depois de carregar a biblioteca JavaScript Journey Sharing, inicialize a visualização do mapa e adicione-a à página HTML. A página precisa conter um <div> elemento que contenha a visualização do mapa. O elemento <div> é chamado de map_canvas nos exemplos a seguir.=

Viagens sob demanda

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

Tarefas agendadas

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

Ouvir eventos e processar erros

Depois de começar a rastrear um veículo, você vai querer atualizar o progresso dele em um mapa e processar erros à medida que o veículo viaja pela rota.

Ouvir eventos de veículo

Para rastrear o progresso de um veículo em viagens sob demanda ou tarefas agendadas, é necessário detectar eventos de mudança.

Você recupera metadados do objeto vehicle ou deliveryVehicle usando o provedor de localização. As informações de metadados incluem a ETA e a distância restante antes da próxima coleta ou entrega do veículo. As mudanças nas informações de metadados acionam um evento update no provedor de localização.

O exemplo a seguir mostra como detectar esses eventos de mudança.

Viagens sob demanda

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

Tarefas agendadas

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

Solucionar erros

Depois de carregar a biblioteca JavaScript Journey Sharing, inicialize a visualização do mapa e adicione-a à página HTML. A página precisa conter um <div> elemento que contenha a visualização do mapa. O elemento <div> é chamado de map_canvas nos exemplos a seguir.=

Viagens sob demanda

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

Tarefas agendadas

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

Parar o rastreamento de um veículo

Para parar o rastreamento de um veículo, é necessário removê-lo do provedor de localização e remover o provedor de localização da visualização do mapa, conforme descrito nas seções a seguir. Os exemplos aqui se aplicam a viagens sob demanda e à implementação de tarefas agendadas.

Remover um veículo do provedor de localização

Para impedir que o provedor de localização rastreie um veículo, remova o ID do veículo de entrega do provedor de localização.

Viagens sob demanda

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Tarefas agendadas

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

Remover o provedor de localização da visualização do mapa

O exemplo a seguir mostra como remover um provedor de localização da visualização do mapa.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

A seguir