Personalizar marcadores

Selecione a plataforma: Android iOS JavaScript

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

1. 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 aplicado depois que cada marcador é criado, substituindo qualquer opção padrão. Para ver exemplos, consulte Mude o estilo dos marcadores usando MarkerOptions (link em inglês) guia.

2. Estilizar marcadores com base em dados: especifique uma função de personalização para marcadores de estilo com base em dados. É possível definir o estilo com base nos dados da jornada ou de fontes externas:

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

   • Fontes externas: você pode combinar os dados do compartilhamento da jornada com dados de fontes externas ao Fleet Engine e estilize o marcador com base nisso as informações.

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

3. Adicionar manipulação de cliques aos marcadores: por exemplo, consulte Adicionar processamento de cliques.

Opções de personalização de marcadores

Ambas as opções usam os seguintes parâmetros de personalização no Google a API 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 uma das personalizaçõ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 do veículo usando funções de personalização. Siga este padrão para personalizar 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 gerenciamento de cliques a um marcador de veículo. Siga este padrão para adicionar a manipulação de cliques a qualquer marcador usando qualquer um dos marcadores 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