Ver una flota

En esta sección, se muestra cómo usar la biblioteca de seguimiento de flotas de JavaScript para ver una flota. Para estos procedimientos, se supone que configuraste la biblioteca de seguimiento de la flota y cargaste un mapa. Para obtener más información, consulta Configura la biblioteca de seguimiento de flotas de JavaScript.

En este documento, se analizan las siguientes acciones que puedes realizar cuando ves una flota:

1. Comienza a hacer un seguimiento de la flota.
2. Escucha eventos y controla errores.
3. Detener el seguimiento.
4. Hacer un seguimiento de un solo vehículo mientras se visualiza una flota

Cómo comenzar a hacer un seguimiento de la flota

Para realizar el seguimiento de una flota, debes crear una instancia de un proveedor de ubicación de flota y establecer restricciones de ubicación para el viewport del mapa, como se describe en las siguientes secciones.

Crea una instancia de un proveedor de ubicación de flota

La biblioteca de seguimiento de flotas de JavaScript incluye un proveedor de ubicación que recupera varios vehículos de Fleet Engine.

Para crear una instancia, sigue estos pasos:

1. Usa el ID de tu proyecto, así como una referencia a tu recuperador de tokens.

2. Usa una consulta de filtro de vehículos. La consulta de filtro de vehículos controla qué vehículos muestra el mapa. El filtro se pasa a Fleet Engine.

   • Para los servicios a pedido, usa vehicleFilter y revisa ListVehiclesRequest.filter.
   • Para las tareas programadas, usa deliveryVehicleFilter y revisa ListDeliveryVehiclesRequest.filter.

3. Configura los límites para la pantalla del vehículo. Usa locationRestriction para limitar el área en la que se mostrarán los vehículos en el mapa. El proveedor de ubicación no estará activo hasta que se configure. Puedes establecer los límites de ubicación en el constructor o después de él.

4. Inicia la vista de mapa.

En los siguientes ejemplos, se muestra cómo crear una instancia de un proveedor de ubicación de flota para situaciones de tareas programadas y on demand. En estos ejemplos, también se muestra cómo usar locationRestriction en el constructor para que el proveedor de ubicación esté activo.

Viajes a pedido

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

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

Tareas programadas

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

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

Para configurar locationRestriction después del constructor, agrega locationProvider.locationRestriction más adelante en el código, como se muestra en el siguiente ejemplo de JavaScript.

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

Cómo establecer una restricción de ubicación con el viewport del mapa

También puedes establecer límites de locationRestriction para que coincidan con el área que se ve actualmente en la vista del mapa.

Viajes on demand

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

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

Tareas programadas

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

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

Cómo inicializar la vista de mapa

Una vez que construyas el proveedor de ubicación, inicializa la vista de mapa de la misma manera que lo haces cuando sigues a un solo vehículo.

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 llama map_canvas en los siguientes ejemplos.

Viajes on demand

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 seguir la flota, debes detectar los cambios en los eventos y controlar cualquier error que surja, como se describe en las siguientes secciones.

Cómo detectar eventos de cambio

Puedes recuperar metainformación sobre la flota desde el objeto del vehículo con el proveedor de ubicación. Los cambios en la metainformación activan un evento de actualización. La metainformación incluye propiedades del vehículo, como el estado de navegación, la distancia restante y los atributos personalizados.

Para obtener más detalles, consulta lo siguiente:

• Referencia de las opciones de vehículos para viajes a pedido
• Referencia de opciones para vehículos de tareas programadas

En los siguientes ejemplos, se muestra cómo escuchar estos eventos de cambio.

Viajes on demand

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

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

Tareas programadas

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

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

Cómo detectar errores

También debes detectar y controlar los errores que se producen mientras se sigue un vehículo. Los errores que surgen de forma asíncrona cuando se solicita información del vehículo activan eventos de error.

En el siguiente ejemplo, se muestra cómo detectar estos eventos para que puedas controlar los errores.

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

Detener el seguimiento de la flota

Para dejar de hacer un seguimiento de la flota, debes establecer los límites del proveedor de ubicación en nulos y, luego, quitarlo de la vista del mapa, como se describe en las siguientes secciones.

Establece los límites del proveedor de ubicación en nulos

Para evitar que el proveedor de ubicación realice el seguimiento de la flota, establece los límites del proveedor de ubicación en nulos.

Viajes a pedido

locationProvider.locationRestriction = null;

locationProvider.locationRestriction = null;

Tareas programadas

locationProvider.locationRestriction = null;

locationProvider.locationRestriction = null;

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

Cómo hacer un seguimiento de un vehículo de entrega mientras visualizas una flota de entrega

Si usas los Servicios de movilidad para las tareas programadas, puedes ver una flota y mostrar la ruta y las próximas tareas de un vehículo de entrega específico en la misma vista de mapa. Para ello, crea una instancia de un proveedor de ubicación de flota de entrega y un proveedor de ubicación de vehículos de entrega, y agrégalos a la vista de mapa. Una vez que se crea una instancia, el proveedor de ubicación de la flota de entregas comienza a mostrar los vehículos de entrega en el mapa. En los siguientes ejemplos, se muestra cómo crear una instancia de ambos proveedores de ubicación:

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

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

Usa la personalización de marcadores para hacer un seguimiento de un vehículo de entrega

Para permitir que el proveedor de ubicación del vehículo de entrega haga un seguimiento de un vehículo de entrega cuando hagas clic en su marcador de flota, sigue estos pasos:

1. Personaliza un marcador y agrega una acción de clic.

2. Oculta el marcador para evitar que se duplique.

En las siguientes secciones, se incluyen ejemplos de estos pasos.

Personaliza un marcador y agrega una acción de clic

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

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

Oculta el marcador para evitar que se duplique

Oculta el marcador del proveedor de ubicación del vehículo de entrega para evitar que se rendericen dos marcadores para el mismo vehículo:

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

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

¿Qué sigue?

• Cómo aplicar diseño a un mapa