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
MarkerOptions
para 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 rastreamento 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
Marcadores de estilo 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 sã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);
}
};