Ahora que configuraste el SDK de consumidor de JavaScript para tareas programadas, irás allí listo para seguir un envío con tu aplicación para consumidores. En este documento, se abarcan los siguientes pasos clave en este proceso:
- Inicializa un mapa y muestra el recorrido compartido
- Actualiza y sigue el progreso del recorrido
- Dejar de compartir el viaje
- Cómo solucionar errores
Cómo configurar un mapa
Para seguir el retiro o la entrega de un envío en tu aplicación web, debes cargar un mapa y crear una instancia del SDK para consumidores para hacer un seguimiento del envío. Puedes cargar un mapa nuevo o usar uno existente. Luego, usarás el comando de inicialización para crear una instancia del SDK de consumidor, de modo que la vista de mapa corresponda al la ubicación del artículo del que se realiza el seguimiento.
Carga un mapa nuevo con la Google Maps JavaScript API
Para crear un mapa nuevo, carga la Google Maps JavaScript API en tu aplicación web. El En el siguiente ejemplo, se muestra cómo cargar la Google Maps JavaScript API, habilitar el y activa la verificación de inicialización.
- El parámetro
callbackejecuta la funcióninitMapdespués de que se carga la API. - El atributo
deferpermite que el navegador continúe renderizando el resto de tu contenido. mientras se carga la API.
Usa la función initMap para crear una instancia del SDK de consumidor. Por ejemplo:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Cómo cargar un mapa existente
También puedes cargar un mapa existente creado por la Google Maps JavaScript API, por ejemplo, uno que ya tengas en uso.
Por ejemplo, supongamos que tienes una página web con un elemento google.maps.Map estándar.
la entidad en la que se muestra un marcador, tal como se define en el siguiente código HTML. Esta
muestra tu mapa con la misma función initMap en la devolución de llamada al final:
<!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 Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// 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 Pier 39
var marker = new google.maps.Marker({position: pier39, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The defer attribute allows the browser to render the page while the API loads.
* The key parameter contains your own API key.
* 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>
Cómo crear una instancia de un proveedor de ubicación de envío
Use el proveedor de ubicación de envío, junto con el token de autorización. de datos que definiste anteriormente, para comenzar a recibir datos de Fleet Engine.
Estos ejemplos muestran cómo crear una instancia del proveedor de ubicación.
JavaScript
const locationProvider =
new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the fetcher defined previously
});
TypeScript
const locationProvider =
new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the fetcher defined previously
});
Muestra el recorrido compartido
Para que el mapa muestre el recorrido compartido, debes inicializar su que configura el marco del mapa para que se corresponda con la ubicación del recorrido de seguimiento proporcionado por el SDK del consumidor una vez que obtiene la información de Fleet Engine.
Sugerencias:
Asegúrate de que tu página contenga un elemento <div> que contenga la vista de mapa. En el siguiente ejemplo, el elemento <div> se llama
map_canvas.Ten en cuenta las reglas de visibilidad predeterminadas que aplica Fleet Engine a las del mundo de los datos. También puedes configurar las reglas de visibilidad para el vehículo activo envíos y tareas de detención programadas. Consulta Cómo personalizar la visibilidad de las tareas en la Configura tareas.
En estos ejemplos, se muestra cómo inicializar una vista de mapa.
JavaScript
function initMap() {
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
// Any undefined styling options use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking starts 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
function initMap() {
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
// 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 starts 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);
}
Actualizar el progreso del envío
Puedes escuchar eventos y actualizar el progreso del envío como un recorrido.
avanza el proyecto. Usa el proveedor de ubicación para recuperar información meta del
taskTrackingInfo. Cambios en la meta
activa un evento update. El objeto taskTrackingInfo proporciona
lo siguiente:
- ETA
- Cantidad de paradas restantes
- Distancia restante antes del retiro o la entrega
En 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);
});
Muestra criterios para varias tareas
El SDK de consumidor para tareas programadas muestra solo una tarea por ID de seguimiento en el mapa. Sin embargo, también suele asignar un ID de seguimiento a una cuenta envío de bien que permanece asociado con el bien a lo largo de su recorrido. en tu sistema. Esto significa que un único ID de seguimiento puede estar asociado con varias tareas, como una tarea de retiro seguida de una tarea de entrega para la misma un paquete o varias tareas de envío fallidas para un paquete.
Para manejar esta situación, Fleet Engine aplica criterios para mostrar tareas, que se muestra en la siguiente tabla.
| Criterios de la tarea | Resultado |
|---|---|
| Abrir tareas de retiro | |
| Existe exactamente uno | Muestra la tarea |
| Existen varios elementos | Generar error |
| Tareas de retiro cerradas | |
| Existe exactamente uno | Muestra la tarea |
| Existen varios (algunos con tiempos de resultados) | Mostrar la tarea con la hora de resultado más reciente |
| Existen varios (ninguno tiene tiempos de resultado) | Generar error |
| Cómo abrir tareas de entrega | |
| Existe exactamente uno | Muestra la tarea |
| Existen varios elementos | Generar error |
| Tareas de entrega cerradas | |
| Existe exactamente uno | Muestra la tarea |
| Existen varios (algunos con tiempos de resultados) | Mostrar la tarea con la hora de resultado más reciente |
| Existen varios (ninguno tiene tiempos de resultado) | Generar error |
Cómo dejar de seguir un envío
Cuando se completa o se cancela un recorrido de envío, tu app para consumidores debe finalizar el uso compartido del recorrido quitando el ID de seguimiento y el proveedor de ubicación de la vista de mapa.
Quita el ID de 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. En los siguientes ejemplos, se muestra cómo hacerlo.
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);
Soluciona los errores de seguimiento de envíos
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 los bloques try...catch.
para manejar errores inesperados.