Cómo hacer un seguimiento de los envíos con la biblioteca de seguimiento de envíos de JavaScript

La biblioteca JavaScript Shipment Tracking te permite visualizar la ubicación de vehículos y ubicaciones de interés rastreadas en Fleet Engine. La biblioteca contiene un componente de mapa de JavaScript que reemplaza directamente para que se conecten una entidad google.maps.Map estándar y componentes de datos con Fleet Engine. Con la biblioteca de seguimiento de envío de JavaScript, puede proporcionar una experiencia de seguimiento de envíos animada y personalizable desde su aplicación web.

Componentes

La biblioteca de seguimiento de envíos de JavaScript proporciona componentes para la visualización del vehículo y la ruta a medida que avanza a un destino, así como datos sin procesar feeds para la hora de llegada estimada del conductor o para la distancia restante para conducir.

Vista de mapa del seguimiento de envíos

El componente de vista de mapa permite visualizar la ubicación de vehículos y destinos. Si se conoce la ruta de un vehículo, se anima el componente de vista de mapa. el vehículo a medida que se desplaza por la ruta prevista.

Proveedor de ubicación de envío

Un proveedor de ubicaciones de envío proporciona información de ubicación para los objetos rastreados en el mapa de seguimiento de envíos para el seguimiento de envíos para el tramo inicial y el último tramo.

Puede usar el proveedor de ubicación de envío para realizar un seguimiento de lo siguiente:

  • Es la ubicación de retiro o entrega de un envío.
  • La ubicación y la ruta del vehículo de entrega.

Objetos de ubicación con seguimiento

El proveedor de ubicación realiza un seguimiento de la ubicación de objetos como vehículos y destinos.

Ubicación de destino

La ubicación de destino es la ubicación donde termina un viaje. Para envío seguimiento, es la ubicación planificada de la tarea.

Ubicación del vehículo

La ubicación del vehículo es la ubicación rastreada de un vehículo. De manera opcional, puede incluir una ruta para el vehículo.

Recuperador de tokens de autenticación

Para controlar el acceso a los datos de ubicación almacenados en Fleet Engine, debes implementar un servicio de creación de tokens web JSON (JWT) para Fleet Engine en tu servidor. Luego, implementa un recuperador de tokens de autenticación como parte de tu aplicación web con la Biblioteca de recorridos compartidos de JavaScript para autenticar el acceso a los datos de ubicación.

Opciones de diseño

Los estilos de marcador y polilínea determinan el aspecto de la objetos de ubicación con seguimiento en el mapa. Puedes usar opciones de diseño personalizadas para cambiar el estilo predeterminado y que coincida con el estilo de tu aplicación web.

Controla la visibilidad de las ubicaciones que sigues

En esta sección, se describen los controles de visibilidad de los objetos a los que se les realiza seguimiento en el mapa. Estas reglas se aplican a dos categorías de objetos:

  • Marcador de ubicación
  • Datos de tareas

Visibilidad del marcador de ubicación

Todos los marcadores de ubicación del origen y el destino se muestran siempre en el mapa. Por ejemplo, siempre se muestra la ubicación de entrega del envío en el mapa, independientemente del estado de la entrega.

Visibilidad de los datos de la tarea

En esta sección, se describen las reglas de visibilidad predeterminadas que se aplican a los datos de las tareas. como la ubicación del vehículo y la ruta restante. Puedes personalizar muchas tareas, pero no todas:

  • Tareas de falta de disponibilidad: No puedes personalizar la visibilidad de estas tareas.
  • Tareas activas del vehículo: Puedes personalizar este tipo de tareas.
  • Tareas de vehículos inactivos: No puedes personalizar la visibilidad de estas tareas.

Tareas de falta de disponibilidad

Si hay al menos una tarea de falta de disponibilidad (por ejemplo, si el conductor se toma un descanso o el vehículo está recargándose) en la ruta a la tarea de la que se hace el seguimiento, el vehículo no es visible. La llegada estimada y el tiempo estimado de finalización de la tarea siguen disponibles.

Tareas activas del vehículo

El TaskTrackingInfo proporciona una serie de elementos de datos que se pueden hacer visibles dentro de Librería de seguimiento de envíos. De forma predeterminada, estos campos son visibles cuando la tarea se asignados al vehículo y cuando este esté a menos de 5 paradas de la tarea. El La visibilidad finaliza cuando se completa o cancela la tarea. Los campos son tan sigue:

  • Polilíneas de ruta
  • Tiempo estimado hasta la llegada
  • Tiempo estimado de finalización de la tarea
  • Distancia en automóvil restante para llegar a la tarea
  • Recuento de paradas restantes
  • Ubicación del vehículo

Puedes personalizar la configuración de visibilidad por tarea estableciendo el TaskTrackingViewConfig en una tarea cuando se crea o se actualiza en Fleet Engine. Esto crea de cuándo están disponibles los elementos de datos individuales, que se pueden basar en los siguientes criterios (denominados a continuación como opción de visibilidad):

  • Recuento de paradas restantes
  • Duración hasta la hora de llegada estimada
  • Distancia de conducción restante
  • Siempre visible
  • No visible nunca

Ten en cuenta que cada elemento de datos solo se puede asociar con una opción de visibilidad. No es posible combinar criterios usando OR u AND.

El siguiente es un ejemplo de personalización. Las reglas de esa personalización son las siguientes:

  • Muestra las polilíneas de la ruta si el vehículo se encuentra a menos de 3 paradas.
  • Muestra la hora de llegada estimada si la distancia de conducción restante es inferior a 5000 metros.
  • Nunca mostrar el recuento de paradas restante.
  • Cada otro campo conserva la visibilidad predeterminada que se muestra cuando el campo el vehículo se encuentre a 5 paradas de la tarea.
"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

También puedes personalizar la configuración de visibilidad predeterminada para tu proyecto comunicación con el equipo de asistencia al cliente.

Reglas de visibilidad de la ubicación del vehículo y polilíneas de rutas:

Cuando se pueden ver las polilíneas de las rutas, la ubicación del vehículo también debe estarlo De lo contrario, la ubicación del vehículo se puede indicar al final de las polilíneas. Que significa que las polilíneas de rutas no pueden tener una opción de visibilidad menos restrictiva.

Se deben seguir estas reglas para proporcionar una polilínea de ruta o un vehículo válidos combinación de visibilidad de la ubicación:

  • Cuando las polilíneas de la ruta y la ubicación del vehículo tienen la misma opción de visibilidad Tipo:

    • Si la opción de visibilidad es el recuento de paradas restante, la duración hasta la hora de llegada estimada o distancia de conducción restante, las polilíneas de la ruta deben proporcionar un valor que sea menor igual o superior al valor establecido para esta opción de visibilidad para el vehículo ubicación. A continuación, se muestra un ejemplo:
    "taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingStopCountThreshold": 5
  },
}
    • Si las polilíneas de la ruta tienen una opción de visibilidad siempre visible, la ubicación del vehículo también debe proporcionar una opción de visibilidad siempre visible.
    • Si la ubicación del vehículo tiene una opción de visibilidad nunca visible, enruta las polilíneas también debe proporcionar una opción de visibilidad nunca visible.

  • Cuando las polilíneas de la ruta y la ubicación del vehículo tienen una opción de visibilidad diferente tipos, la ubicación del vehículo solo es visible cuando ambas opciones de visibilidad que las opciones disponibles estén satisfechas.

    A continuación, se muestra un ejemplo:

    "taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingDrivingDistanceMetersThreshold": 3000
  },
}

    En este ejemplo, la ubicación del vehículo solo es visible si la parada restante la cantidad es de al menos 3 Y la distancia en automóvil restante es de, al menos, 3,000 metros.

Cómo comenzar a usar la Biblioteca de recorridos compartidos de JavaScript

Antes de usar la biblioteca de JavaScript Journey Share, asegúrate de lo siguiente: estar familiarizado con Fleet Engine y obtener una clave de API.

Para hacer un seguimiento de una entrega, primero crea un reclamo de ID de seguimiento.

Cómo crear un reclamo de ID de seguimiento

Para realizar el seguimiento de un envío mediante el proveedor de ubicación de envío, crear un token web JSON (JWT) con una reclamación de ID de seguimiento

Para crear la carga útil de JWT, agrega una reclamación adicional en la sección de autorización con la clave trackingid. Establece su valor según el ID de seguimiento del envío.

En el siguiente ejemplo, se muestra cómo crear un token para realizar un seguimiento por ID de seguimiento:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "trackingid": "tid_54321",
   }
}

Crea un recuperador de tokens de autenticación

Puedes crear un recuperador de tokens de autenticación para recuperar un token creado con los reclamos correspondientes en sus servidores que usan un certificado de cuenta de Google para tu proyecto. Es importante solo crear tokens en los servidores y nunca compartir los certificados con ningún cliente. De lo contrario, puedes poner en riesgo la seguridad del sistema.

El recuperador debe mostrar una estructura de datos con dos campos, dentro de una promesa:

  • Una cadena token
  • Un número expiresInSeconds. Un token vence en este período y recuperar datos.

La biblioteca de seguimiento de envío de JavaScript solicita un token a través de la autenticación Recuperador de tokens cuando se cumple alguna de las siguientes condiciones:

  • No tiene un token válido, como cuando no llamó a la herramienta de recuperación en una nueva carga de página o cuando el recuperador no ha regresado con un token.
  • El token que recuperó ya venció.
  • El token que recuperó está en el plazo de un minuto a partir de su vencimiento.

De lo contrario, la biblioteca utiliza el token válido que se emitió anteriormente y hace lo siguiente: no llames al recuperador.

En el siguiente ejemplo, se muestra cómo crear un recuperador de token de autenticación:

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

Cuando implementes el extremo del servidor para acuñar los tokens, conserva el lo siguiente:

  • El extremo debe mostrar una hora de vencimiento para el token. en el ejemplo. arriba, se da como data.ExpiresInSeconds.
  • El recuperador de tokens de autenticación debe pasar la hora de vencimiento (en segundos, desde el momento de la recuperación) a la biblioteca, como se muestra en el ejemplo.
  • SERVER_TOKEN_URL depende de tu implementación de backend. Estas son las URL para el backend de la app de ejemplo:
    • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
    • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
    • https://SERVER_URL/token/fleet_reader

Cómo cargar un mapa desde HTML

En el siguiente ejemplo, se muestra cómo cargar JavaScript Shipment Tracking biblioteca a partir de una URL especificada. El parámetro devolución de llamada ejecuta la initMap. una vez que se carga la API. El atributo defer permite que el navegador continúa 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>

Sigue un envío

En esta sección, se muestra cómo usar la biblioteca de seguimiento de envíos de JavaScript para seguir el retiro o la entrega de un envío. Asegúrate de carga la biblioteca desde la función de devolución de llamada especificada en la etiqueta de la secuencia de comandos antes de ejecutar el código.

Cómo crear una instancia de un proveedor de ubicación de envío

La biblioteca de seguimiento de envío de JavaScript predefine un proveedor de ubicación. para la API de Flet Engine Deliveries. Usa el ID del proyecto y una referencia a la fábrica de tokens para crear una instancia.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

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

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

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

Cómo inicializar la vista de mapa

Después de cargar la biblioteca de JavaScript Journey Share, inicializa la vista de mapa y agregarla a la página HTML. Tu página debe contener un elemento &lt;div&gt; que contiene la vista de mapa En el siguiente ejemplo, el elemento &lt;div&gt; se llama &lt;div&gt;.

Para evitar condiciones de carrera, establece el ID de seguimiento del proveedor de ubicación en la devolución de llamada que se invoca después de inicializar el mapa.

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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 wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

TypeScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
 // Any undefined styling options will use defaults.
});

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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 wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

ID de seguimiento

El ID de seguimiento proporcionado al proveedor de ubicación puede corresponder a varias tareas, por ejemplo, una tarea de retiro y entrega para el mismo paquete varios intentos de entrega fallidos. Se seleccionó una tarea para que se muestre en el mapa de seguimiento de envíos. La tarea que se mostrará se determina de la siguiente manera:

  1. Si hay exactamente una tarea de retiro abierta, se muestra. Se genera un error si hay varias tareas de retiro abiertas.
  2. Si hay exactamente una tarea de entrega abierta, se muestra. Se produce un error generarse si hay múltiples tareas de entrega abiertas.
  3. Si hay tareas de entrega cerradas, haz lo siguiente:
    • Si hay exactamente una tarea de entrega cerrada, se muestra.
    • Si hay varias tareas de entrega cerradas, la que tenga la más reciente el tiempo de resultado.
    • Si hay varias tareas de entrega cerradas, ninguna de las cuales tiene un resultado tiempo, se genera un error.
  4. Si hay tareas de retiro cerradas, haz lo siguiente:
    • Si hay exactamente una tarea de retiro cerrada, se muestra.
    • Si hay varias tareas de retiro cerradas, la que tenga la más reciente el tiempo de resultado.
    • Si hay varias tareas de retiro cerradas, ninguna de las cuales tiene un resultado tiempo, se genera un error.
  5. De lo contrario, no se muestra ninguna tarea.

Cómo escuchar eventos de cambio

Puedes recuperar información meta sobre una tarea a partir de la información de seguimiento de tareas con el proveedor de ubicación. La metainformación incluye la hora de llegada estimada, la cantidad de paradas y la distancia restantes antes del retiro o la entrega. Los cambios en la metainformación activan un evento update. El siguiente ejemplo se muestra cómo escuchar estos eventos de cambio.

JavaScript

locationProvider.addListener('update', e => {
  // e.taskTrackingInfo contains data that may be useful
  // to the rest of the UI.
  console.log(e.taskTrackingInfo.remainingStopCount);
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  // e.taskTrackingInfo contains data that may be useful
  // to the rest of the UI.
  console.log(e.taskTrackingInfo.remainingStopCount);
});

Cómo solucionar errores

Los errores que surgen de forma asíncrona al solicitar información de envío se activan error. En el siguiente ejemplo, se muestra cómo escuchar estos eventos para manejar los errores.

JavaScript

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

TypeScript

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

Nota: Asegúrate de unir las llamadas a la biblioteca en bloques try...catch para manejar errores inesperados.

Detener el seguimiento

Para evitar que el proveedor de ubicación realice el seguimiento del envío, quita el ID de seguimiento del proveedor de ubicación.

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

Quitar el proveedor de ubicación de la vista de 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);

Personalizar la apariencia del mapa base

Para personalizar el aspecto del componente de mapas, sigue estos pasos: cómo aplicar ajustes de diseño a tu mapa con herramientas basadas en la nube o configurando opciones directamente en el código.

Cómo usar el diseño de mapas basado en Cloud

Diseño de mapas basado en Cloud te permite crear y editar diseños de mapa para cualquiera de tus apps que usen Google Maps en la consola de Google Cloud, sin necesidad de hacer cambios en tu código. Los diseños de mapa se guardan como IDs de mapa en tu proyecto de Cloud. Para aplicar un estilo a tu mapa de seguimiento de envíos de JavaScript, especifica una mapId cuando crees el JourneySharingMapView. No se puede cambiar el campo mapId o se agrega después de que se crea una instancia de JourneySharingMapView. Lo siguiente En este ejemplo, se muestra cómo habilitar un diseño de mapa creado previamente con un ID de mapa.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Usa el diseño de mapas basado en código

Otra forma de personalizar el diseño de mapa es establecer mapOptions cuando crea el JourneySharingMapView.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Cómo usar las personalizaciones de los marcadores

Con la biblioteca JavaScript Shipment Tracking, puedes personalizar el aspecto y la apariencia de los marcadores agregados al mapa. Para ello, especifica el marcador personalizadas, que la biblioteca de seguimiento de envíos aplica antes de agregar marcadores en el mapa y con cada actualización de los marcadores.

La personalización más sencilla consiste en especificar un MarkerOptions que se aplicará a todos los marcadores del mismo tipo. Los cambios especificadas en el objeto se aplican después de crear cada marcador y reemplaza las opciones predeterminadas.

Una opción más avanzada es especificar una función de personalización. Personalización permiten definir el estilo de los marcadores según los datos, además de agregar interactividad con marcadores, como el manejo de clics. Específicamente, Envío El seguimiento pasa datos a la función de personalización sobre el tipo de objeto que el marcador representa: un vehículo o un destino. Esto permite que el estilo de los marcadores cambiar según el estado actual del elemento del marcador. por ejemplo, el la cantidad de paradas planificadas que faltan hasta el destino. Incluso puedes unirte con datos de fuentes externas a Fleet Engine y definir el estilo del marcador según esa información.

La biblioteca de Shipment Tracking proporciona los siguientes parámetros de personalización en FleetEngineShipmentLocationProviderOptions

Cómo cambiar el estilo de los marcadores con MarkerOptions

En el siguiente ejemplo, se muestra cómo configurar el diseño de un marcador de vehículo con Un objeto MarkerOptions Sigue este patrón para personalizar el estilo de cualquier con cualquiera de las personalizaciones del marcador mencionadas anteriormente.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Cómo cambiar el estilo de los marcadores con las funciones de personalización

En el siguiente ejemplo, se muestra cómo configurar el diseño de un marcador de vehículo. Seguir este patrón para personalizar el estilo de cualquier marcador con cualquiera de parámetros de personalización mencionados anteriormente.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

Cómo agregar control de clics a los marcadores

En el siguiente ejemplo, se muestra cómo agregar el control de clics a un marcador de vehículo. Sigue este patrón para agregar el control de clics a cualquier marcador que utilice cualquiera de ellos. parámetros de personalización mencionados anteriormente.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Cómo personalizar las polilíneas

Con la biblioteca de Shipment Tracking, puedes personalizar el aspecto de la ruta del envío en el mapa. La biblioteca crea google.maps.Polyline objeto de cada par de coordenadas en el estado activo o restante del envío, ruta de acceso. Puedes aplicar ajustes de diseño a los objetos Polyline especificando personalizaciones de polilíneas. El luego, aplica estas personalizaciones en dos situaciones: antes de agregar el objetos al mapa y cuándo los datos utilizados para los objetos cambiaron.

Al igual que con la personalización de marcadores, puedes especificar PolylineOptions se aplicará a todos los objetos Polyline coincidentes cuando se creen o actualizarse.

Del mismo modo, puedes especificar una función de personalización. Funciones de personalización permitir el diseño individual de los objetos según los datos que envía Fleet Engine. La función puede cambiar el estilo de cada objeto basándose en el estado actual de el envío; por ejemplo, aplicar un color al objeto Polyline con un matiz más profundo o y se vuelve más grueso cuando el vehículo se mueve más lento. Incluso puedes unirte de fuentes fuera de Fleet Engine y diseñar el objeto Polyline en función de eso información.

Puedes especificar las personalizaciones con los parámetros proporcionados en FleetEngineShipmentLocationProviderOptions Puedes configurar personalizaciones para diferentes estados de ruta en el ya viajó, viajó activamente o aún no viajó. El son los siguientes:

Cambia el diseño de los objetos Polyline con PolylineOptions

En el siguiente ejemplo, se muestra cómo configurar el diseño de un objeto Polyline con PolylineOptions Sigue este patrón para personalizar el estilo de cualquier objeto Polyline que use cualquiera de las personalizaciones de polilíneas mencionadas anteriormente.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Cambia el estilo de los objetos Polyline con las funciones de personalización

En el siguiente ejemplo, se muestra cómo configurar la propiedad Polyline de un objeto activo estilo. Sigue este patrón para personalizar el diseño de cualquier objeto Polyline. usando cualquiera de los parámetros de personalización de polilíneas mencionados anteriormente.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Controla la visibilidad de los objetos Polyline

De forma predeterminada, todos los objetos Polyline son visibles. Sigue estos pasos para crear un objeto Polyline: invisible, establece su visible propiedad:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Cómo mostrar una InfoWindow para un marcador de ubicación o vehículo

Puedes usar un InfoWindow para mostrar información adicional sobre un vehículo o un marcador de ubicación.

En el siguiente ejemplo, se muestra cómo crear un elemento InfoWindow y adjuntarlo a un marcador de vehículo:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Inhabilitar el ajuste automático

Puedes impedir que el mapa ajuste automáticamente el viewport al vehículo. y la ruta prevista si inhabilitas el ajuste automático. El siguiente ejemplo se muestra cómo inhabilitar el ajuste automático cuando configuras el recorrido compartido vista de mapa.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.   
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Cómo reemplazar un mapa existente

Puedes usar la biblioteca de seguimiento de envíos de JavaScript para reemplazar un mapa existente que incluya marcadores o cualquier otra personalización sin perder esas personalizaciones.

Por ejemplo, supongamos que tienes una página web con un elemento google.maps.Map estándar. entidad en la que se muestra un marcador:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, initially centered at Mountain View, CA.
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, now positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * The callback parameter executes the initMap() function.
    -->
    <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Para agregar la biblioteca de JavaScript Journey Share, sigue estos pasos:

  1. Agrega el código para la fábrica del token de autenticación.
  2. Inicializa un proveedor de ubicación en la función initMap().
  3. Inicializa la vista de mapa en la función initMap(). La vista contiene el mapa.
  4. Mueve tu personalización a la función de devolución de llamada para inicializar la vista de mapa.
  5. Agrega la biblioteca de ubicaciones al cargador de API.

En el siguiente ejemplo, se muestran los cambios que se deben realizar:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
let locationProvider;

// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider.
  locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

  locationProvider.trackingId = TRACKING_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, initially centered at Mountain View, CA.
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, now positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };

    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Si tienes un paquete con seguimiento determinado ID cerca de Uluru, ahora se renderizará en el mapa.