Personalizar marcadores

Com a biblioteca JavaScript de rastreamento de frota, é possível personalizar a aparência dos marcadores adicionados ao mapa. Para isso, especifique personalizações de marcador, que a biblioteca de rastreamento de frota aplica antes de adicionar marcadores ao mapa e a cada atualização de marcador. É possível personalizar a aparência dos marcadores das seguintes maneiras:

1. Estilizar marcadores com base no tipo: especifique um objeto MarkerOptions para estilizar marcadores do mesmo tipo. As mudanças especificadas são aplicadas depois que cada marcador é criado, substituindo as opções padrão. Para exemplos, consulte Marcadores de estilo com base no tipo neste guia.

2. Estilizar marcadores com base em dados: especifique uma função de personalização com base em dados e adicione interatividade aos marcadores, como o processamento de cliques. É possível estilizar com base em dados de rastreamento de frota ou de fontes externas:

   • Dados do rastreamento de frota: o rastreamento de frota transmite dados para a função de personalização, incluindo o tipo de objeto que o marcador representa: veículo, parada ou tarefa. O estilo do marcador muda com base no estado atual do elemento. Por exemplo, o número de paradas restantes ou o tipo de tarefa.

   • Fontes externas: é possível combinar dados de rastreamento de frota com informações de fontes fora do Fleet Engine e estilizar o marcador com base nessas informações também.

   Para exemplos, consulte Estilizar marcadores com base em dados.

3. Adicionar processamento de cliques aos marcadores: para exemplos, consulte Adicionar processamento de cliques.

4. Filtrar quais marcadores estão visíveis: filtre quais marcadores aparecem com os recursos de filtragem disponíveis no provedor de localização JavaScript. Exemplo:

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter

5. Use a personalização de marcadores para rastrear um veículo de entrega de tarefas programadas: é possível personalizar marcadores para rastrear veículos. Para mais informações, consulte Usar a 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

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

Parâmetros de personalização de tarefas programadas

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

Estilizar 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 uma das opções listadas em Opções de personalização de marcadores.

Exemplo de viagens por demanda

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Exemplo de tarefas agendadas

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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 em dados usando uma das opções listadas em Opções de personalização de marcadores acima.

Exemplo de viagens por demanda

vehicleMarkerCustomization =
  (params) => {
    const remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

Exemplo de tarefas agendadas

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

Adicionar o processamento de cliques aos marcadores

O exemplo a seguir mostra como adicionar o processamento de cliques a um marcador de veículo. Siga esse padrão para adicionar o processamento de cliques a qualquer marcador usando uma das opções listadas em Opções de personalização de marcador acima.

Exemplo de viagens por demanda

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

Exemplo de tarefas agendadas

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

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 qualquer uma das opções listadas em Opções de personalização de marcadores acima.

Exemplo de viagens por demanda

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Exemplo de tarefas agendadas

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

A seguir

• Personalizar o estilo de um mapa
• Personalizar polilinhas