La biblioteca de seguimiento de flotas de JavaScript te permite visualizar las ubicaciones
de vehículos de sus flotas casi en tiempo real. La biblioteca usa el
API de Deliveries
para visualizar los vehículos de entrega y las tareas. Como el
Biblioteca de seguimiento de envío de JavaScript,
contiene un componente de mapa de JavaScript que reemplaza directamente
para que una entidad google.maps.Map estándar y los componentes de datos se conecten
con Fleet Engine.
Componentes
La biblioteca de seguimiento de flotas de JavaScript proporciona componentes para la visualización de paradas y vehículos de reparto, así como feeds de datos sin procesar para la hora de llegada estimada o las paradas restantes la distancia hasta una entrega.
Vista de mapa de seguimiento de flota
El componente de vista de mapa de seguimiento de flota visualiza la ubicación de vehículos y tareas. Si se conoce la ruta de un vehículo, el componente de vista de mapa anima ese vehículo a medida que se mueve por su ruta prevista.
Proveedores de ubicación
Los proveedores de ubicación trabajan con información almacenada en Fleet Engine para enviar ubicaciones de los objetos rastreados en el mapa de recorrido compartido.
Proveedor de ubicación de vehículos de entrega
El proveedor de ubicación de vehículos de entrega muestra el estado de un solo vehículo de entrega información de ubicación. Tiene información sobre la ubicación del vehículo y la tareas que completó el vehículo de entrega.
Proveedor de ubicación de flota de entregas
El proveedor de ubicación de flotas de entregas muestra los valores de ubicación información. Puedes filtrar por ubicaciones o vehículos específicos, toda la flota.
Controla la visibilidad de las ubicaciones que sigues
En esta sección, se describen las reglas de visibilidad para los objetos de ubicación con seguimiento en el mapa del proveedor de ubicaciones predefinido de Fleet Engine. Personalizada o derivada los proveedores de ubicación pueden cambiar las reglas de visibilidad.
Vehículos de reparto
Un vehículo de reparto es visible apenas se crea en Fleet Engine, y es visible a lo largo de su ruta independientemente de sus tareas.
Marcadores de ubicación de tareas
Las paradas previstas para los vehículos se muestran en el mapa como marcadores de paradas vehiculares. Marcadores de las tareas completadas se muestran con un estilo diferente al del vehículo paradas planificadas.
La ubicación de los resultados de las tareas se muestra con marcadores de resultados de la tarea. Las tareas con un resultado SUCCEEDED se muestran con marcadores de tareas correctas, mientras que las demás tareas se muestran con marcadores de tareas fallidas.
Comienza a usar la biblioteca de seguimiento de flotas de JavaScript
Antes de usar la Biblioteca de seguimiento de flota de JavaScript, asegúrate de lo siguiente: estar familiarizado con Fleet Engine y obtener una clave de API. Luego, crea un ID de tarea y un reclamo de ID del vehículo de entrega.
Crea un ID de tarea y un reclamo de ID del vehículo de entrega
Para hacer un seguimiento de los vehículos de entrega con el proveedor de ubicación de vehículos de entrega, haz lo siguiente: crear un token web JSON (JWT) con un ID de tarea y una reclamación de ID de vehículo de entrega
Para crear la carga útil de JWT, agrega una reclamación adicional en la sección de autorización con las claves taskid y deliveryvehicleid, y establece el valor de cada clave a *. El token se debe crear con Fleet Engine Superusuario del servicio de Cloud IAM. Ten en cuenta que esto otorga un acceso amplio para crear, leer y modificar entidades de Fleet Engine, y solo deben compartirse con usuarios de confianza.
En el siguiente ejemplo, se muestra cómo crear un token para hacer un seguimiento por vehículo y tarea:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
"sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"taskid": "*",
"deliveryvehicleid": "*",
}
}
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 flotas 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
- https://
Cómo cargar un mapa desde HTML
En el siguiente ejemplo, se muestra cómo cargar la exploración de JavaScript
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 a un vehículo de reparto
En esta sección, se muestra cómo usar la biblioteca de seguimiento de flotas de JavaScript para seguir a un vehículo de reparto. 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.
Crea una instancia de proveedor de ubicación de vehículos de entrega
La biblioteca JavaScript de seguimiento de flotas predefine un proveedor de ubicación. para la API de Fleet Engine Deliveries. Usa tu ID del proyecto y una referencia a la fábrica de tokens para crear una instancia.
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',
});
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 <div> que contiene la vista de mapa El elemento <div> se llama map_canvas en el siguiente ejemplo.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// 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 wish.
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],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// 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 wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Cómo escuchar eventos de cambio
Puedes recuperar información meta sobre una tarea desde el objeto deliveryVehicle.
usando el proveedor de ubicación. La metainformación incluye la hora de llegada estimada y
la distancia restante antes del próximo punto de partida o destino del vehículo. Cambios
a la información meta activan un evento update. El siguiente ejemplo
se muestra cómo escuchar estos eventos de cambio.
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);
}
});
Detecta errores
Errores que surgen de forma asíncrona a partir de la solicitud de un activador de información sobre el vehículo de entrega los eventos de 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);
});
Detener el seguimiento
Para evitar que el proveedor de ubicación realice el seguimiento del vehículo que realiza la entrega, quita el el ID del vehículo de entrega del proveedor de ubicación.
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
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);
Ver una flota de entregas
En esta sección, se muestra cómo usar la biblioteca de JavaScript Journey Share para ver una flota de reparto. 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.
Crear una instancia de proveedor de ubicación de flota de entregas
La biblioteca JavaScript de seguimiento de flotas predefine un proveedor de ubicación que recupera múltiples vehículos del API de FletEngine Deliveries. Usa tu el ID del proyecto y una referencia a tu recuperador de tokens para crear una instancia.
JavaScript
locationProvider =
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"',
});
TypeScript
locationProvider =
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"',
});
deliveryVehicleFilter especifica una consulta que se usa para filtrar los vehículos que se muestran en
el mapa. Este filtro se pasa directamente a Fleet Engine. Consulta
ListDeliveryVehiclesRequest.filter
para conocer los formatos compatibles.
locationRestriction limita el área en la que se muestran los vehículos en el mapa.
También controla si el seguimiento de la ubicación está activo o no. Seguimiento de ubicación
no comenzará hasta que se establezca.
Una vez creado el proveedor de ubicación, inicializar la vista de mapa.
Cómo establecer una restricción de ubicación con el viewport del mapa
Los límites de locationRestriction se pueden configurar para que coincidan con el área actual
en la vista de mapa.
JavaScript
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;
}
});
TypeScript
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;
}
});
Cómo escuchar eventos de cambio
Puedes recuperar información meta sobre la flota desde el deliveryVehicles
con el proveedor de ubicación. La metainformación incluye
propiedades, como el estado de navegación, la distancia restante y los atributos personalizados;
ver
documentación de referencia
para obtener más información. Los cambios en la información meta activan un evento update. El
En el siguiente ejemplo, se muestra cómo escuchar estos eventos de cambio.
JavaScript
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);
}
}
});
TypeScript
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);
}
}
});
Detecta errores
Errores que surgen de forma asíncrona al solicitar información de la flota de entrega pueden activar eventos de errores. Para ver ejemplos sobre cómo escuchar estos eventos, consulte para detectar errores,
Detener el seguimiento
Para evitar que el proveedor de ubicación realice un seguimiento de la flota de entregas, establece los límites del proveedor de ubicación a un valor nulo.
JavaScript
locationProvider.locationRestriction = null;
TypeScript
locationProvider.locationRestriction = null;
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);
Sigue un vehículo de reparto mientras consultas una flota de entregas
Mientras visualizas una flota, puedes mostrar la ruta y las próximas tareas para un vehículo de reparto. Para ello, crea una instancia de Ubicación de la flota de entrega proveedor y un proveedor de ubicación de vehículos de entrega, y agregarlos a la vista de mapa:
JavaScript
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
});
TypeScript
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
});
El proveedor de ubicación de la flota de entregas comienza a mostrar los vehículos de entrega en el mapa. Usa la personalización de marcadores para habilitar la ubicación del vehículo de entrega proveedor para realizar un seguimiento de un vehículo de entrega cuando se hace clic en su marcador de flota:
JavaScript
// 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();
});
}
};
TypeScript
// 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 del proveedor de ubicación del vehículo de entrega para evitar que se renderice dos marcadores para el mismo vehículo:
JavaScript
// 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);
}
};
TypeScript
// 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);
}
};
Personalizar la apariencia del mapa base
Para personalizar el aspecto del componente de mapas, sigue estos pasos: aplicar 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
desde la consola de Google Cloud sin necesidad de aplicar cambios en tu código.
Los diseños de mapa se guardan como IDs de mapa en tu proyecto de Cloud. Para
aplica un estilo a tu mapa de seguimiento de la flota JavaScript, especifica un
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 el ejemplo anterior, se muestra cómo habilitar un diseño de mapa creado previamente con una
ID de mapa.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
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 de seguimiento de flotas de JavaScript, puedes personalizar la apariencia de marcadores agregados al mapa. Para ello, especifica las personalizaciones de los marcadores, que luego aplica la Biblioteca de seguimiento de flotas antes de agregar marcadores al 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, seguimiento de flota Pasa datos a la función de personalización sobre el tipo de objeto del marcador representa: vehículo, parada o tarea. Esto permite que el estilo de los marcadores cambie según el estado actual del elemento del marcador. por ejemplo, el número de paradas restantes o el tipo de tarea. Incluso puedes unir datos de fuentes fuera de Fleet Engine y definir el diseño del marcador según esa información.
Además, puedes usar funciones de personalización para filtrar la visibilidad de los marcadores.
Para hacerlo, llama a
setVisible(false)
en el marcador.
Sin embargo, por motivos de rendimiento, recomendamos filtrar con el filtro
filtrar en el proveedor de ubicación, como
FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
Dicho esto, cuando necesites funcionalidad de filtrado adicional, puedes aplicar
con la función de personalización.
La biblioteca de seguimiento de flota proporciona los siguientes parámetros de personalización:
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 los parámetros de personalización del marcador mencionados 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.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
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: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Filtrar marcadores visibles
En el siguiente ejemplo, se muestra cómo filtrar los marcadores de vehículos que son visibles. Sigue este patrón para filtrar los marcadores con cualquier personalización de marcadores parámetros indicados anteriormente.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
Usa personalizaciones de polilínea cuando sigas a un vehículo de reparto
Con la biblioteca de seguimiento de flotas de JavaScript, también puedes personalizar el aspecto y
de la ruta del vehículo que sigues en el mapa. La biblioteca crea
google.maps.Polyline
objeto de cada par de coordenadas en las coordenadas activas o restantes
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
que se aplicará a todos los objetos Polyline coincidentes cuando se
crearse 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 diseño de cada objeto según el vehículo actual
el estado; por ejemplo, aplicar un color más profundo al objeto Polyline o hacer que
se vuelve más grueso cuando el vehículo se mueve más lento. Incluso puedes unirte desde
fuentes fuera de Fleet Engine y diseña el objeto Polyline en función de ellas
información.
Puedes especificar las personalizaciones con los parámetros proporcionados en
FleetEngineDeliveryVehicleLocationProviderOptions
Puedes configurar personalizaciones para diferentes estados de ruta en el
ya viajó, viajó activamente o aún no viajó. El
son los siguientes:
takenPolylineCustomization, para un camino ya recorrido;activePolylineCustomization, para un camino que transite activamente.remainingPolylineCustomization, para un camino que aún no ha recorrido.
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 el diseño de una polilínea activa
con una función de personalización. Sigue este patrón para personalizar la
diseño de cualquier objeto Polyline con cualquiera de las personalizaciones de polilíneas
parámetros enumerados anteriormente.
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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: DeliveryVehiclePolylineCustomizationFunctionParams) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
Cómo reemplazar un mapa existente
Puedes 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, que incluye el seguimiento de flota, haz lo siguiente:
- Agrega el código para la fábrica del token de autenticación.
- Inicializa un proveedor de ubicación en la función
initMap(). - Inicializa la vista de mapa en la función
initMap(). La vista contiene el mapa. - Mueve tu personalización a la función de devolución de llamada para inicializar la vista de mapa.
- 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. Use FleetEngineDeliveryVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
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
});
mapView.addListener('ready', () => {
locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_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, which includes Fleet Tracking functionality.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
Si conduce un vehículo de reparto con la determinado ID cerca de Uluru, ahora se renderizará en el mapa.