Personalizar marcadores

Selecione a plataforma: Android iOS JavaScript

Personalize a aparência dos marcadores adicionados ao mapa. É possível personalizar a aparência dos marcadores adicionados ao mapa de duas 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 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 viagens ou de fontes externas:

    • Dados do compartilhamento de viagens: o compartilhamento de viagens transmite dados de marcadores para a função de personalização, incluindo o tipo de objeto que o marcador representa: veículo, origem, ponto de referência ou destino. A estilização do marcador muda com base no estado atual do elemento do marcador. Por exemplo, o número de pontos de referência restantes até que o veículo termine 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 exemplos, consulte Mudar o estilo dos marcadores usando funções de personalização neste guia.

  3. Adicionar tratamento de cliques aos marcadores: para exemplos, consulte Adicionar tratamento 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 esse 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 do marcador de veículo usando funções de personalização. Siga esse padrão para personalizar o estilo de qualquer marcador usando qualquer um dos parâmetros de personalização de marcador 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 tratamento de cliques aos marcadores

O exemplo a seguir mostra como adicionar tratamento de cliques a um marcador de veículo. Siga este padrão para adicionar tratamento de cliques a qualquer marcador usando qualquer um dos parâmetros de personalização de marcador 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