Personalizar marcadores

Selecione a plataforma: Android iOS JavaScript

Personalize a aparência dos marcadores adicionados ao mapa. Personalize a aparência dos marcadores adicionados ao mapa de duas 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 Mudar o estilo dos marcadores usando MarkerOptions neste guia.

  2. Estilizar marcadores com base em dados: especifique uma função de personalização para estilizar marcadores com base em dados. É possível estilizar com base em dados do compartilhamento de percurso ou de fontes externas:

    • Dados do compartilhamento de viagem: o compartilhamento de viagem transmite dados de marcador para a função de personalização, incluindo o tipo de objeto que o marcador representa: veículo, origem, ponto de parada ou destino. O estilo do marcador muda com base no estado atual do elemento. Por exemplo, o número de pontos de referência restantes até que o veículo termine a viagem.

    • Fontes externas: você pode combinar os dados de compartilhamento de viagens com informações de fontes fora do Fleet Engine e estilizar o marcador com base nessas informações também.

    Para ver exemplos, consulte Mudar o estilo dos marcadores usando funções de personalização neste guia.

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

Opções de personalização de marcadores

As duas opções usam os seguintes parâmetros de personalização na API Maps JavaScript do Google em FleetEngineTripLocationProviderOptions:

Mudar o estilo dos marcadores usando MarkerOptions

O exemplo a seguir mostra como configurar o estilo do 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.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Mudar o estilo dos marcadores usando funções de personalização

O exemplo a seguir mostra como configurar o estilo do marcador de veículo usando funções de personalização. Siga este padrão para personalizar o estilo de qualquer marcador usando um dos parâmetros de personalização listados em Opções de personalização de marcadores.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

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 um dos parâmetros de personalização listados em Opções de personalização de marcador.

JavaScript

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

TypeScript

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

A seguir