Personalizar polilinhas do trajeto

Este documento mostra como personalizar a aparência das rotas para veículos rastreados em um mapa. Os trajetos são desenhados em um mapa com polilinhas. Para cada par de coordenadas em um trajeto ativo ou restante de um veículo, a biblioteca cria um objeto google.maps.Polyline. É possível estilizar os objetos Polyline especificando personalizações de polilinha que a biblioteca aplica em duas situações:

  • Antes de adicionar os objetos ao mapa
  • Quando os dados usados para os objetos mudarem

Estilizar polilinhas

Assim como é possível personalizar marcadores, você pode estilizar polilinhas de rotas de diferentes maneiras:

  1. Estilizar polilinhas de rotas por tipo: use PolylineOptions para aplicar a todos os objetos Polyline correspondentes quando eles forem criados ou atualizados. Para um exemplo, consulte Estilizar polilinhas por tipo.

  2. Estilizar polilinhas de rotas com base em dados: especifique uma função de personalização com base em dados de rastreamento de frota ou de fontes externas:

    • Dados do rastreamento de frota: o rastreamento de frota transmite dados de polilinha para a função de personalização, incluindo dados sobre o estado atual do veículo. É possível estilizar polilinhas com base nesses dados, incluindo colorir o objeto Polyline com um tom mais escuro ou torná-lo mais grosso quando o veículo estiver se movendo mais lentamente.

    • Fontes externas: é possível combinar dados de rastreamento de frota com dados de fontes fora do Fleet Engine e estilizar o objeto Polyline com base nessas informações.

    Por exemplo, consulte Estilizar polilinhas com base em dados.

  3. Controlar a visibilidade das polilinhas de rotas: é possível ocultar ou mostrar polilinhas usando a propriedade visible. Para mais detalhes, consulte Controlar a visibilidade de polilinhas neste guia.

  4. Mostrar mais informações sobre um veículo ou marcador de local: use a propriedade infowindow para mostrar mais informações. Para mais detalhes, consulte Mostrar mais informações para um marcador de veículo ou local neste guia.

Opções de personalização de polilinha

As seguintes opções de personalização estão disponíveis em FleetEngineVehicleLocationProviderOptions e FleetEngineDeliveryVehicleLocationProviderOptions. É possível definir personalizações para diferentes estados do trajeto do veículo:

Estilizar polilinhas de rotas por tipo

Para estilizar polilinhas de rotas por tipo, mude o estilo dos objetos Polyline usando PolylineOptions.

O exemplo a seguir mostra como configurar o estilo de um objeto Polyline com PolylineOptions. Siga este padrão para personalizar o estilo de qualquer objeto Polyline usando uma das personalizações de polilinha de rota listadas em Opções de personalização de polilinha neste guia.

Exemplo para viagens sob demanda ou tarefas programadas

JavaScript

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

TypeScript

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

Estilizar polilinhas de rotas usando dados

Para estilizar polilinhas de rotas usando dados, mude o estilo de objetos Polyline usando funções de personalização.

O exemplo a seguir mostra como configurar o estilo de uma rota ativa usando uma função de personalização. Siga este padrão para personalizar o estilo de qualquer objeto Polyline usando qualquer um dos parâmetros de personalização de polilinha listados em Opções de personalização de polilinha neste guia.

Exemplo de viagens por demanda

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[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'});
      }
    }
  };

Exemplo de tarefas agendadas

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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'});
      }
    }
  };

Exemplo de estilização com reconhecimento de tráfego (somente viagens sob demanda)

O Fleet Engine retorna dados de velocidade do trânsito para os trajetos ativos e restantes do veículo seguido. Você pode usar essas informações para estilizar objetos Polyline de acordo com as velocidades de tráfego:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Controlar a visibilidade de polilinhas

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

Exemplo para viagens sob demanda ou tarefas programadas

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Mostrar uma janela de informações para um marcador de veículo ou local

Você pode usar um InfoWindow para mostrar mais informações sobre um veículo ou marcador de local.

O exemplo a seguir mostra como criar um InfoWindow e anexá-lo a um marcador de veículo.

Exemplo de viagens por demanda

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

Exemplo de tarefas agendadas

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

A seguir