Personalizar marcadores

Selecione a plataforma: Android iOS JavaScript

Personalize a aparência dos marcadores adicionados ao mapa. Personalize a aparência e a sensação dos marcadores adicionados ao mapa de duas maneiras:

1. Estilizar marcadores com base no tipo: especifique um objeto MarkerOptions para definir o estilo dos marcadores do mesmo tipo. As alterações especificadas são aplicadas após a criação de cada marcador, substituindo as opções padrão. Para conferir exemplos, consulte Alterar o estilo dos marcadores usando MarkerOptions neste guia.

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

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

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

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

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

Opções de personalização de marcadores

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

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Mudar o estilo dos marcadores usando MarkerOptions

O exemplo a seguir mostra como configurar o estilo do marcador do veículo com um objeto MarkerOptions. Siga este padrão para personalizar o estilo de qualquer marcador usando qualquer uma das personalizações de marcador 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 dos marcadores de veículos usando funções de personalização. Siga este padrão para modificar o estilo de qualquer marcador usando qualquer 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 gerenciamento de cliques aos marcadores

O exemplo a seguir mostra como adicionar o processamento de cliques a um marcador de veículo. Siga este padrão para adicionar o gerenciamento de cliques a qualquer marcador usando um dos parâmetros de personalização listados em Opções de personalização de marcadores.

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

• Personalizar polilinhas do trajeto