Con la libreria di monitoraggio del parco risorse JavaScript, puoi personalizzare l'aspetto di indicatori aggiunti alla mappa. A questo scopo, devi specificare le personalizzazioni degli indicatori, che viene poi applicata dalla libreria di monitoraggio della flotta prima di aggiungere indicatori alla mappa. e a ogni aggiornamento degli indicatori. Puoi personalizzare l'aspetto degli indicatori in in questi modi:
Indicatori di stile in base al tipo: specifica un
MarkerOptionsper applicare uno stile agli indicatori dello stesso tipo. Le modifiche specificate verranno quindi applicati dopo la creazione di ciascun indicatore, sovrascrivendo eventuali opzioni predefinite. Per esempi, consulta Indicatori di stile basati sul tipo nella questa guida.Indicatori di stile in base ai dati: specifica una funzione di personalizzazione in base ai dati, nonché per aggiungere interattività agli indicatori, ad esempio la gestione dei clic. Puoi applicare stili in base ai dati del monitoraggio del parco risorse oppure di origini esterne:
Dati derivanti dal monitoraggio del parco risorse: il monitoraggio del parco risorse trasmette i dati alla funzione di personalizzazione che comprende il tipo di oggetto dell'indicatore rappresenta: veicolo, fermata o attività. Stile dell'indicatore e poi modifiche in base allo stato corrente dell'elemento indicatore. Ad esempio, il numero di fermate rimanenti o tipo di attività.
Origini esterne: puoi combinare i dati di monitoraggio del parco risorse con i dati provenienti da origini esterne a Fleet Engine e definire lo stile dell'indicatore in base a informazioni.
Per alcuni esempi, consulta la sezione Indicatori di stile basati sui dati.
Aggiungere la gestione dei clic agli indicatori: per alcuni esempi, consulta Aggiungi gestione dei clic.
Filtra gli indicatori visibili: filtra gli indicatori visualizzati con le funzionalità di filtro disponibili nella posizione JavaScript o il provider di servizi di terze parti. Ad esempio:
di Gemini Advanced.Utilizza la personalizzazione degli indicatori per monitorare un veicolo per la consegna di attività pianificate: Puoi personalizzare gli indicatori per monitorare i veicoli. Per ulteriori informazioni, vedi Utilizzare personalizzazione degli indicatori per monitorare un veicolo per la consegna.
Opzioni di personalizzazione dell'indicatore
La libreria di monitoraggio del parco risorse fornisce i seguenti parametri di personalizzazione:
Parametri di personalizzazione dei viaggi on demand
Parametri di personalizzazione delle attività pianificate
Indicatori di stile in base al tipo
L'esempio seguente mostra come configurare lo stile degli indicatori di veicoli con
è un oggetto MarkerOptions. Segui questo schema per personalizzare lo stile di
utilizzando una delle opzioni elencate
Opzioni di personalizzazione dell'indicatore.
Esempio di viaggi on demand
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Esempio di attività pianificate
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Indicatori di stile in base ai dati
L'esempio seguente mostra come configurare lo stile degli indicatori di veicoli utilizzando funzioni di personalizzazione. Segui questo schema per personalizzare lo stile di dell'indicatore in base ai dati che utilizzano una qualsiasi delle opzioni elencate Opzioni di personalizzazione degli indicatori elencate sopra.
Esempio di viaggi on demand
JavaScript
vehicleMarkerCustomization =
(params) => {
const remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
Esempio di attività pianificate
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}`);
};
Aggiungi gestione dei clic agli indicatori
L'esempio seguente mostra come aggiungere la gestione dei clic a un indicatore di veicolo. Segui questo schema per aggiungere la gestione dei clic a qualsiasi indicatore utilizzando uno dei opzioni elencate in Opzioni di personalizzazione dell'indicatore sopra elencate.
Esempio di viaggi on demand
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
Esempio di attività pianificate
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
Filtra gli indicatori visibili
Se devi utilizzare setVisible, segui questo pattern per filtrare tutti gli indicatori
utilizzando una delle opzioni elencate in Opzioni di personalizzazione dell'indicatore in alto.
Esempio di viaggi on demand
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
Esempio di attività pianificate
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);
}
};