Com a biblioteca JavaScript de rastreamento de frotas, você pode personalizar a aparência de marcadores adicionados ao mapa. Para fazer isso, especifique personalizações de marcador, que a biblioteca de monitoramento da frota aplica antes de adicionar marcadores ao mapa. e a cada atualização de marcador. Você pode personalizar a aparência dos marcadores no dessas maneiras:
Marcadores de estilo com base no tipo: especifique um
MarkerOptionspara definir o estilo de marcadores do mesmo tipo. As mudanças especificadas são então é aplicado após cada marcador ser criado, substituindo qualquer opção padrão. Para exemplos, consulte Marcadores de estilo com base no tipo em neste guia.Marcadores de estilo com base em dados: especifique uma função de personalização com base em além de adicionar interatividade aos marcadores, como o tratamento de cliques. É possível definir o estilo com base nos dados do rastreamento da frota ou de fontes externas:
Dados do rastreamento da frota: o rastreamento da frota transmite dados para o função de personalização, incluindo o tipo de objeto do marcador representa: veículo, parada ou tarefa. Depois, o estilo do marcador é alterado. com base no estado atual do elemento marcador. Por exemplo, o número de paradas restantes ou tipo de tarefa.
Fontes externas: você pode combinar os dados de rastreamento de frota com dados de origens fora do Fleet Engine e estilize o marcador com base nisso as informações.
Confira exemplos em Estilizar marcadores com base em dados.
Adicionar manipulação de cliques aos marcadores: para exemplos, consulte Adicionar processamento de cliques.
Filtrar quais marcadores são visíveis: filtre quais marcadores aparecem. com os recursos de filtragem disponíveis no local do JavaScript, de nuvem. Exemplo:
.Use a personalização de marcadores para rastrear um veículo de entrega de tarefas programadas: Você pode personalizar os marcadores para rastrear veículos. Para mais informações, consulte Usar personalização de marcadores para rastrear um veículo de entrega
Opções de personalização de marcadores
A biblioteca de monitoramento de frota oferece os seguintes parâmetros de personalização:
Parâmetros de personalização de viagens sob demanda
Parâmetros de personalização de tarefas programadas
Definir o estilo dos marcadores com base no tipo
O exemplo a seguir mostra como configurar o estilo de um marcador de veículo com
um objeto MarkerOptions. Siga este padrão para personalizar o estilo de qualquer
marcador usando qualquer uma das opções listadas em
Opções de personalização de marcadores.
Exemplo de viagens sob demanda
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Exemplo de tarefas programadas
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Estilizar marcadores com base em dados
O exemplo a seguir mostra como configurar o estilo de um marcador de veículo usando funções de personalização. Siga este padrão para personalizar o estilo de qualquer marcador com base nos dados que usam qualquer uma das opções listadas em Opções de personalização de marcadores listadas acima.
Exemplo de viagens sob demanda
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}`);
};
Exemplo de tarefas programadas
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}`);
};
Adicionar o gerenciamento de cliques aos marcadores
O exemplo a seguir mostra como adicionar o gerenciamento de cliques a um marcador de veículo. Siga este padrão para adicionar o manuseio de cliques a qualquer marcador usando nas Opções de personalização de marcadores listadas acima.
Exemplo de viagens sob demanda
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.
});
}
};
Exemplo de tarefas programadas
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.
});
}
};
Filtrar quais marcadores estão visíveis
Se você precisar usar setVisible, siga este padrão para filtrar os marcadores.
usando uma das opções listadas em Opções de personalização de marcadores acima.
Exemplo de viagens sob demanda
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);
}
};
Exemplo de tarefas programadas
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);
}
};