Rastrear um veículo

Nesta seção, mostramos como usar a biblioteca de rastreamento de frota do JavaScript para rastrear um para viagens sob demanda ou tarefas programadas.

Para rastrear um veículo, siga estas etapas:

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

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

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

  • Origem do URL: chama a API do 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 da frota.

  • Atributo defer: permite que o navegador continue renderizando o restante do seu 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 de mapa

Para começar a rastrear um veículo, vocês dois instanciam um provedor de localização de veículo e inicialize uma visualização de mapa com o ID do veículo, conforme descrito a seguir em outras seções.

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

A biblioteca de rastreamento de frotas JavaScript inclui um provedor de localização para a frota do Compute Engine. Use o ID do seu projeto e uma referência ao seu coletor de tokens para instanciá-la, como 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 de mapa

Depois de carregar a biblioteca de compartilhamento de jornada do JavaScript, inicialize a visualização de mapa e adicioná-la à página HTML. Sua página deve conter um elemento &lt;div&gt; que contém a visualização do mapa. O elemento &lt;div&gt; é chamada 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);

Detectar eventos e lidar com erros

Depois de começar a monitorar um veículo, você quer atualizar o progresso dele em um mapa e lidar com erros enquanto o veículo percorre o trajeto.

Detectar eventos no veículo

Para acompanhar o progresso de um veículo em viagens sob demanda ou tarefas programadas, faça o seguinte: é preciso detectar eventos de mudança.

Para recuperar o meta do objeto vehicle ou deliveryVehicle, use o provedor de localização. As metainformações incluem o HEC e a distância restante antes da próxima embarque ou desembarque do veículo. Alterações nas metainformações acionar 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 de compartilhamento de jornada do JavaScript, inicialize a visualização de mapa e adicioná-la à página HTML. Sua página deve conter um elemento &lt;div&gt; que contém a visualização do mapa. O elemento &lt;div&gt; é chamada 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 de monitorar um veículo

Para parar de rastrear um veículo, remova-o do provedor de localização e remova o provedor de localização da visualização de mapa, conforme descrito a seguir em outras seções. Os exemplos aqui se aplicam a viagens sob demanda e tarefas programadas implementação.

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 fornecido pelo 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 de mapa

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

A seguir