Personalizar polilinhas do trajeto

Selecione a plataforma: Android iOS JavaScript

Este documento aborda como personalizar polilinhas de rotas para o mapa usado no app de acompanhamento de viagens baseado na Web para usuários finais.

Com o SDK do consumidor, é possível controlar a visibilidade da polilinha de rota ou definir o estilo dela para a rota de uma viagem no mapa. O SDK cria um google.maps.Polyline objeto para cada par de coordenadas no caminho ativo ou restante da viagem. Em seguida, a biblioteca aplica essas personalizações em duas situações:

• antes de adicionar os objetos ao mapa
• quando os dados usados para os objetos mudaram

Polilinhas de rotas de estilo

Assim como você pode definir o estilo dos marcadores, é possível definir o estilo das polilinhas de rotas usando parâmetros de personalização. Em seguida, configure o estilo usando uma das seguintes abordagens:

• Mais simples: use PolylineOptions para aplicar a todos os objetos Polyline correspondentes quando eles forem criados ou atualizados.
• Avançado: especifique uma função de personalização. As funções de personalização permitem o estilo individual dos objetos com base nos dados enviados pelo Fleet Engine. A função pode mudar o estilo de cada objeto com base no estado atual da jornada. Por exemplo, colorir o objeto Polyline com um tom mais escuro ou torná-lo mais espesso quando o veículo estiver se movendo mais lentamente. Você pode até mesmo fazer uma junção de fontes externas ao Fleet Engine e definir o estilo do objeto Polyline com base nessas informações.

Parâmetros de personalização

Ao definir o estilo das polilinhas de rotas, você usa os parâmetros fornecidos em FleetEngineTripLocationProviderOptions. Esses parâmetros fornecem diferentes estados de caminho na viagem do veículo, da seguinte maneira:

• Caminhos já percorridos: use takenPolylineCustomization.
• Caminho percorrido ativamente: use .activePolylineCustomization
• Caminho ainda não percorrido: use remainingPolylineCustomization.

Usar PolylineOptions

O exemplo a seguir mostra como configurar o estilo de um Polyline objeto com PolylineOptions. Siga esse padrão para personalizar o estilo de qualquer objeto Polyline usando qualquer uma das personalizações de polilinha listadas anteriormente.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Usar funções de personalização para definir o estilo das polilinhas de rotas

O exemplo a seguir mostra como configurar o estilo de uma polilinha de rota ativa. Siga esse padrão para personalizar o estilo de qualquer objeto Polyline usando qualquer um dos parâmetros de personalização de polilinha de rota listados anteriormente.

JavaScript

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Controlar a visibilidade da polilinha de rota

Por padrão, todos os objetos Polyline são visíveis. Para tornar um objeto Polyline invisível, defina a propriedade visible dele:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};