Personalizar marcadores

Com a biblioteca de rastreamento de frota do JavaScript, é possível personalizar a aparência dos marcadores adicionados ao mapa. Para isso, especifique as 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 destas maneiras:

  1. Estilizar marcadores com base no tipo: especifique um MarkerOptions objeto para estilizar marcadores do mesmo tipo. As mudanças especificadas são aplicadas após a criação de cada marcador, substituindo todas as opções padrão. Para exemplos, consulte Estilizar marcadores com base no tipo em este guia.

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

    • Dados de 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. A estilização do marcador muda com base no estado atual do elemento do marcador. Por exemplo, o número de paradas restantes ou o tipo de tarefa.

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

    Para exemplos, consulte Estilizar marcadores com base em dados.

  3. Adicionar tratamento de cliques aos marcadores: para exemplos, consulte Adicionar tratamento 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 do JavaScript. Por exemplo:

  5. Usar 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 fornece os seguintes parâmetros de personalização:

Parâmetros de personalização de viagens sob demanda

Parâmetros de personalização de tarefas programadas

Estilizar marcadores com base no tipo

O exemplo a seguir mostra como configurar a estilização de um marcador de veículo com um objeto MarkerOptions. Siga esse padrão para personalizar a estilização de qualquer marcador usando 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 a estilização de um marcador de veículo usando funções de personalização. Siga esse padrão para personalizar a estilização 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 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 tratamento de cliques aos marcadores

O exemplo a seguir mostra como adicionar tratamento de cliques a um marcador de veículo. Siga esse padrão para adicionar tratamento de cliques a qualquer marcador usando uma das opções listadas em Opções de personalização de marcadores 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 esse padrão para filtrar qualquer marcador 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);
    }
  };

A seguir