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. Carga la biblioteca y, luego, inicializa la vista de mapa
2. Proporciona la ubicación del vehículo y la vista del mapa
3. Escucha eventos y soluciona errores
4. Cómo detener el seguimiento

Carga la biblioteca e 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:

• URL source: 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 la 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 realizar el seguimiento de un vehículo, debes crear una instancia de un proveedor de ubicación de vehículos y, luego, inicializar 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 del proyecto y una referencia al recuperador de tokens para crear una instancia, como se muestra en los siguientes ejemplos.

Viajes a pedido

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

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

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

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

Tareas programadas

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

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

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 Share, inicializa la vista de mapa y agrégala a la página HTML. Tu página debe contener un elemento &lt;div&gt; que contenga la vista de mapa. El elemento <div> se denomina map_canvas en los siguientes ejemplos.

Viajes a pedido

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

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

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

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.

Puedes recuperar metadatos del objeto vehicle o deliveryVehicle mediante 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

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

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

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

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

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

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

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

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 detener el 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

locationProvider.vehicleId = '';

locationProvider.vehicleId = '';

Tareas programadas

locationProvider.deliveryVehicleId = '';

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.

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

¿Qué sigue?

• Ver una flota de entregas
• Cómo aplicar diseño a un mapa