Realizar el seguimiento de un vehículo

En esta sección, se muestra cómo usar la biblioteca de seguimiento de flotas de JavaScript para hacer un seguimiento de un vehículo para viajes a pedido o tareas programadas.

Para hacer un seguimiento de un vehículo, sigue estos pasos:

  1. Cómo cargar la biblioteca y luego inicializar la vista del mapa
  2. Proporciona la ubicación del vehículo y la vista del mapa
  3. Cómo detectar eventos y controlar errores
  4. Cómo detener el seguimiento

Carga la biblioteca y luego inicializa la vista de mapa

Para mostrar las operaciones de tu flota en un mapa de tu página web, usa una secuencia de comandos que llame a un mapa con tu clave de API. En el siguiente ejemplo, se muestra cómo hacerlo desde HTML:

  • Fuente de URL: Llama a la API de Google Maps para solicitar un mapa con tu clave de API.

  • Parámetro callback: Ejecuta la función initMap después de que la API muestra la llamada.

  • Parámetro libraries: Carga la biblioteca de seguimiento de flotas.

  • Atributo defer: Permite que el navegador siga renderizando el resto de tu página mientras se carga la API.

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

Proporciona la ubicación del vehículo y la vista del mapa

Para comenzar a hacer un seguimiento de un vehículo, crea una instancia de un proveedor de ubicación del vehículo y, luego, inicializa una vista de mapa con el ID del vehículo, como se describe en las siguientes secciones.

Crea una instancia de un proveedor de ubicación del vehículo

La biblioteca de seguimiento de flotas de JavaScript incluye un proveedor de ubicación para la API de Fleet Engine. Usa el ID de tu proyecto y una referencia a tu recuperador de tokens para crear una instancia, como se muestra en los siguientes ejemplos.

Viajes a pedido

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

Tareas programadas

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

Inicializa la vista de mapa

Después de cargar la biblioteca de JavaScript Journey Sharing, inicializa la vista de mapa y agrégala a la página HTML. Tu página debe contener un elemento <div> que contenga la vista del mapa. El elemento <div> se denomina map_canvas en los siguientes ejemplos.

Viajes a pedido

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

Tareas programadas

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

Detecta eventos y controla errores

Una vez que hayas comenzado a hacer un seguimiento de un vehículo, querrás actualizar su progreso en un mapa y controlar los errores a medida que el vehículo avanza por su ruta.

Cómo detectar eventos de vehículos

Para hacer un seguimiento del progreso de un vehículo para viajes a pedido o tareas programadas, debes detectar eventos de cambio.

Recuperas meta del objeto vehicle o deliveryVehicle con el proveedor de ubicación. La metainformación incluye la hora de llegada estimada y la distancia restante antes de la próxima partida o destino del vehículo. Los cambios en la metainformación activan un evento de actualización en el proveedor de ubicación.

En el siguiente ejemplo, se muestra cómo escuchar estos eventos de cambio.

Viajes a pedido

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

Tareas programadas

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

Cómo solucionar errores

Después de cargar la biblioteca de JavaScript Journey Sharing, inicializa la vista de mapa y agrégala a la página HTML. Tu página debe contener un elemento <div> que contenga la vista del mapa. El elemento <div> se denomina map_canvas en los siguientes ejemplos.

Viajes a pedido

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

Tareas programadas

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

Cómo dejar de hacer un seguimiento de un vehículo

Para dejar de hacer un seguimiento de un vehículo, debes quitarlo del proveedor de ubicación y quitar el proveedor de ubicación de la vista del mapa, como se describe en las siguientes secciones. Los ejemplos que se incluyen aquí se aplican a la implementación de tareas programadas y de viajes a pedido.

Cómo quitar un vehículo del proveedor de ubicación

Para evitar que el proveedor de ubicación realice un seguimiento de un vehículo, quita el ID del vehículo de entrega del proveedor de ubicación.

Viajes a pedido

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Tareas programadas

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

Cómo quitar el proveedor de ubicación de la vista del mapa

En el siguiente ejemplo, se muestra cómo quitar un proveedor de ubicación de la vista de mapa.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

¿Qué sigue?