Personalizar polilinhas do trajeto

Selecione a plataforma: Android iOS JavaScript

Este documento aborda como personalizar polilinhas de trajeto para o mapa que você usa em seu app de rastreamento de jornada baseado na Web para usuários de consumidores.

Com o SDK para consumidores, você pode controlar a visibilidade da polilinha da rota ou estilizar o polilinha para o trajeto de uma jornada no mapa. O SDK cria um Objeto google.maps.Polyline para cada par de coordenadas na rota ativo ou restante. A biblioteca então aplica essas personalizações duas situações:

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

Estilizar polilinhas de trajeto

Da mesma forma que você estiliza marcadores, defina o estilo das polilinhas do trajeto usando parâmetros de personalização. A partir daí, você vai configurar o estilo usando um dos as seguintes abordagens:

• Mais simples: use PolylineOptions para aplicar a todas as objetos Polyline correspondentes quando eles são criados ou atualizados.
• Avançado: especifique uma função de personalização. As funções de personalização permitem definir o estilo individual dos objetos com base no enviados pelo Fleet Engine. A função pode alterar o estilo de cada objeto com base no estado atual da jornada. por exemplo, colorir Polyline tem uma tonalidade mais profunda ou mais espesso quando o veículo está mais devagar. É possível até participar de fontes que não estão no Fleet Engine e defina o estilo do objeto Polyline com base nessas informações.

Parâmetros de personalização

Ao estilizar as polilinhas do trajeto, você usa 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 objeto Polyline. com PolylineOptions. Siga este padrão para personalizar o estilo do qualquer objeto Polyline usando 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 estilizar as polilinhas do trajeto

O exemplo a seguir mostra como configurar o estilo de uma rota ativa polilinha. Siga este padrão para personalizar o estilo de qualquer objeto Polyline. usando qualquer um dos parâmetros de personalização da polilinha do trajeto 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 do trajeto

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

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};