Monitore seus dispositivos com a biblioteca de rastreamento de frota de JavaScript

A biblioteca JavaScript Fleet Tracking permite visualizar a localização de veículos nas suas frotas quase em tempo real. A biblioteca usa a API On Demand Rides and Deliveries para permitir a visualização de veículos e viagens. A biblioteca JavaScript Fleet Tracking contém um componente de mapa JavaScript que é uma substituição simples para uma entidade google.maps.Map padrão e componentes de dados para conexão com o Fleet Engine.

Componentes

A biblioteca JavaScript Fleet Tracking oferece componentes para a visualização de veículos e waypoints da viagem, além de feeds de dados brutos para HEC ou distância restante até uma viagem.

Visualização em mapa do rastreamento de frota

O componente de visualização de mapa "Rastreamento de frota" mostra a localização de veículos e os waypoints da viagem. Se o trajeto para um veículo for conhecido, o componente de visualização de mapa vai animar o veículo à medida que ele se move ao longo do caminho previsto.

Exemplo de visualização de mapa de rastreamento de frotas

Provedores de localização

Os provedores de localização trabalham com informações armazenadas no Fleet Engine para enviar informações de localização de objetos rastreados ao mapa de compartilhamento de jornada.

Provedor de localização de veículos

O provedor de localização de veículos mostra as informações de localização de um único veículo. Ele tem informações sobre a localização do veículo e a viagem atual atribuídas a ele.

Provedor de localização de frotas

O provedor de localização da frota mostra informações de localização de vários veículos. É possível usar um filtro para mostrar um veículo específico e a localização dele ou os locais de veículos de toda a frota.

Controlar a visibilidade dos locais rastreados

As regras de visibilidade determinam quando um objeto de localização rastreado fica visível no mapa para um provedor de localização do Fleet Engine. Observação: o uso de um provedor de local personalizado ou derivado pode alterar as regras de visibilidade.

Veículos

Um veículo fica visível assim que é criado no Fleet Engine e aparece quando o estado do veículo é Online. Isso significa que um veículo pode ficar visível mesmo quando não há uma viagem atribuída a ele.

Marcadores de local de waypoints

Um marcador de local do waypoint indica pontos ao longo da jornada de um veículo, começando pela origem e terminando no destino final. Os marcadores de local do waypoint podem ser definidos da seguinte maneira:

  • Origin: indica o local de partida da viagem com o veículo.
  • Intermediário: indica paradas para a viagem do veículo.
  • Destino: indica o local final da viagem com o veículo.

Os waypoints planejados do veículo são mostrados no mapa como marcadores de origem, intermediário e destino.

Introdução à biblioteca JavaScript Fleet Tracking

Antes de usar a biblioteca JavaScript Fleet Tracking, conheça o Fleet Engine e saiba como acessar uma chave de API. Em seguida, crie uma reivindicação de ID da viagem e ID do veículo.

Criar uma reivindicação de ID da viagem e ID do veículo

Para rastrear veículos usando o provedor de localização de veículos, crie um JSON Web Token (JWT) com um ID de viagem e uma declaração de ID do veículo.

Para criar o payload do JWT, adicione outra declaração na seção de autorização com as chaves tripid e vehicleid e defina o value de cada chave como *. O token precisa ser criado usando o papel do Cloud IAM Superusuário de serviço do Fleet Engine. Observe que isso concede amplo acesso para criar, ler e modificar entidades do Fleet Engine e só deve ser compartilhado com usuários confiáveis.

O exemplo a seguir mostra como criar um token para rastrear por veículo e tarefa:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

Criar um coletor de tokens de autenticação

A biblioteca JavaScript Fleet Tracking solicita um token usando o coletor de tokens de autenticação quando uma das seguintes condições é verdadeira:

  • Ela não tem um token válido, como quando não chamou o coletor em um novo carregamento de página ou quando não retornou com um token.
  • O token buscado anteriormente expirou.
  • O token buscado anteriormente está dentro de um minuto para expirar.

Caso contrário, a biblioteca usa o token emitido anteriormente, ainda válido, e não chama o coletor.

Crie um coletor de tokens de autenticação para recuperar um token criado com as declarações apropriadas nos servidores usando um certificado de conta de serviço para o projeto. É importante criar tokens apenas nos servidores e nunca compartilhar certificados com nenhum cliente. Caso contrário, você pode comprometer a segurança do sistema.

O coletor precisa retornar uma estrutura de dados com dois campos, encapsulados em uma promessa:

  • Uma string token.
  • Um número expiresInSeconds. Um token expira nesse período após a busca.

O exemplo a seguir mostra como criar um coletor de tokens de autenticação:

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

Ao implementar o endpoint do lado do servidor para criar os tokens, lembre-se do seguinte:

  • O endpoint precisa retornar um prazo de validade para o token. No exemplo acima, ele é fornecido como data.ExpiresInSeconds.
  • O coletor de tokens de autenticação precisa transmitir o tempo de validade (em segundos, a partir do momento da busca) à biblioteca, conforme mostrado no exemplo.
  • O SERVER_TOKEN_URL depende da sua implementação de back-end. Confira os exemplos de URL:
    • https://SERVER_URL/token/driver/VEHICLE_ID
    • https://SERVER_URL/token/consumer/TRIP_ID
    • https://SERVER_URL/token/fleet_reader

Carregar um mapa de HTML

O exemplo a seguir mostra como carregar a biblioteca JavaScript Journey Share de um URL especificado. O parâmetro callback executa a função initMap após o carregamento da API. O atributo defer permite que o navegador continue renderizando o restante da página enquanto a API é carregada.

 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta" defer></script>

Seguir um veículo

Nesta seção, mostramos como usar a biblioteca JavaScript Fleet Tracking Library para acompanhar um veículo. Carregue a biblioteca usando a função de callback especificada na tag do script antes de executar o código.

Instanciar um provedor de localização de veículos

A biblioteca JavaScript Fleet Tracking predefine um provedor de localização para a API On Demand Rides and Deliveries. Use o ID do projeto e uma referência à fábrica de tokens para instanciá-lo.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

Inicializar a visualização de mapa

Depois de carregar a biblioteca Journey Share, inicialize a visualização de mapa e adicione-a à página HTML. Sua página deve conter um elemento <div> que contenha a visualização de mapa. No exemplo abaixo, o elemento <div> chama-se map_canvas.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Ouvir eventos de alteração

Você pode extrair metainformações sobre um veículo do objeto vehicle usando o provedor de localização. Essas informações incluem o HEC e a distância restante antes da próxima embarque ou desembarque do veículo. As mudanças nas meta informações acionam um evento update. O exemplo abaixo mostra como detectar esses eventos de mudança.

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicle contains data that may be
  // useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  // e.vehicle contains data that may be useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

Detectar erros

Erros que surgem de forma assíncrona ao solicitar informações do veículo acionam eventos de erro. O exemplo a seguir mostra como detectar esses eventos para processar erros.

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

Parar monitoramento

Para impedir que o provedor de localização rastreie o veículo, remova o ID dele.

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Remover o provedor de localização da visualização de mapa

O exemplo a seguir mostra como remover um provedor de localização da visualização de mapa.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Conferir uma frota de veículos

Nesta seção, mostramos como usar a biblioteca JavaScript Journey Share para conferir uma frota de veículos. Carregue a biblioteca a partir da função de callback especificada na tag do script antes de executar o código.

Instanciar um provedor de localização de frota de veículos

A biblioteca JavaScript Fleet Tracking define previamente um provedor de localização que busca vários veículos da API On Demand Rides and Deliveries. Para instanciá-lo, use o ID do projeto e uma referência ao coletor de tokens.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

vehicleFilter especifica uma consulta usada para filtrar veículos mostrados no mapa. Esse filtro é transmitido diretamente para o Fleet Engine. Consulte ListVehiclesRequest para conferir os formatos com suporte.

locationRestriction limita a área em que os veículos são mostrados no mapa. Ela também controla se o monitoramento de localização está ativo ou não. O monitoramento de localização não será iniciado até que essa opção seja definida.

Após construir o provedor de localização, inicialize a visualização de mapa.

Definir restrição de local usando a janela de visualização do mapa

Os limites locationRestriction podem ser configurados para corresponder à área visível na visualização de mapa.

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Ouvir eventos de alteração

É possível extrair metainformações sobre a frota do objeto vehicles usando o provedor de localização. As metainformações incluem propriedades do veículo, como status da navegação, distância até o próximo waypoint e atributos personalizados. Consulte a documentação de referência para mais detalhes. Mudar para as metainformações aciona um evento de atualização. O exemplo abaixo mostra como detectar esses eventos de mudança.

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

Detectar erros

Os erros que surgem de forma assíncrona ao solicitar informações da frota de veículos acionam eventos de erro. Para ver exemplos de como detectar esses eventos, consulte Detectar erros.

Parar monitoramento

Para impedir que o provedor de localização rastreie a frota, defina os limites do provedor de localização como nulo.

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Remover o provedor de localização da visualização de mapa

O exemplo a seguir mostra como remover um provedor de localização da visualização de mapa.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Personalizar a aparência do mapa básico

Para personalizar a aparência do componente de mapas, estilize seu mapa usando ferramentas baseadas na nuvem ou definindo opções diretamente no código.

Usar a Estilização de mapas baseada na nuvem

Com a Estilização de mapas baseada na nuvem, você pode criar e editar estilos para qualquer um dos seus apps que usam o Google Maps no console do Google Cloud sem precisar alterar o código. Os estilos de mapa são salvos como IDs de mapa no seu projeto do Cloud. Para aplicar um estilo ao mapa de rastreamento de frota em JavaScript, especifique um mapId ao criar o JourneySharingMapView. Não é possível adicionar ou mudar o campo mapId depois que o JourneySharingMapView for instanciado. O exemplo a seguir mostra como ativar um estilo de mapa criado anteriormente com um ID.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

Usar a Estilização de mapas baseada em código

Outra maneira de personalizar o estilo do mapa é definir mapOptions ao criar o JourneySharingMapView.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Usar as personalizações dos marcadores

Com a biblioteca JavaScript Fleet Tracking, você pode personalizar a aparência dos marcadores adicionados ao mapa. Para fazer isso, especifique personalizações de marcador, que serão aplicadas pela biblioteca Fleet Tracking antes de adicionar marcadores ao mapa e sempre que eles forem atualizados.

Para criar uma personalização simples, especifique um objeto MarkerOptions para aplicar a todos os marcadores do mesmo tipo. As alterações especificadas no objeto são aplicadas depois da criação de cada marcador, substituindo as opções padrão.

Uma opção mais avançada é especificar uma função de personalização. As funções de personalização permitem estilizar os marcadores com base nos dados, além de adicionar interatividade a eles, como o processamento de cliques. Especificamente, o "Rastreamento de frota" transmite dados para a função de personalização sobre o tipo de objeto que o marcador representa: veículo, parada ou tarefa. Isso permite que o estilo do marcador mude com base no estado atual do próprio elemento, por exemplo, no número de paradas restantes ou no tipo de tarefa. É possível até mesmo mesclar dados de fontes fora do Fleet Engine e estilizar o marcador com base nessas informações.

Além disso, é possível usar funções de personalização para filtrar a visibilidade do marcador. Para fazer isso, chame setVisible(false) no marcador.

No entanto, por motivos de desempenho, recomendamos usar a filtragem nativa no provedor de localização, como FleetEngineFleetLocationProvider.vehicleFilter. Sendo assim, quando você precisar de mais funcionalidades de filtragem, aplique a filtragem usando a função de personalização.

A biblioteca Fleet Tracking oferece os seguintes parâmetros de personalização:

Mudar o estilo dos marcadores usando MarkerOptions

O exemplo a seguir mostra como configurar o estilo de um marcador de veículo com um objeto MarkerOptions. Siga esse padrão para personalizar o estilo de qualquer marcador usando qualquer um dos parâmetros de personalização listados acima.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Alterar o estilo dos marcadores usando funções de personalização

O exemplo a seguir mostra como configurar o estilo de um marcador de veículo. Siga esse padrão para personalizar o estilo de qualquer marcador usando qualquer um dos parâmetros listados acima.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

Adicionar processamento de cliques aos marcadores

O exemplo a seguir mostra como adicionar o gerenciamento de cliques a um marcador de veículo. Siga esse padrão para adicionar processamento de cliques a qualquer marcador usando um dos parâmetros de personalização listados acima.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Filtrar marcadores visíveis

O exemplo a seguir mostra como filtrar quais marcadores de veículo ficam visíveis. Siga esse padrão para filtrar os marcadores usando qualquer um dos parâmetros de personalização listados acima.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Usar personalizações de polilinha ao seguir um veículo

Com a biblioteca Fleet Tracking, você também pode personalizar a aparência do trajeto do veículo seguido no mapa. A biblioteca cria um objeto google.maps.Polyline para cada par de coordenadas no caminho ativo ou restante do veículo. Você pode estilizar os objetos Polyline especificando personalizações de polilinha. A biblioteca aplica essas personalizações em duas situações: antes de adicionar os objetos ao mapa e quando os dados usados para os objetos mudam.

Assim como na personalização de marcadores, é possível especificar um conjunto de PolylineOptions para ser aplicado a todos os objetos Polyline correspondentes quando eles forem criados ou atualizados.

Da mesma forma, é possível especificar uma função de personalização. As funções de personalização permitem aplicar um estilo individual aos objetos com base nos dados enviados pelo Fleet Engine. A função pode mudar o estilo de cada objeto com base no estado atual do veículo, por exemplo, colorir o objeto Polyline com uma tonalidade mais profunda ou torná-lo mais espesso quando o veículo está se movendo mais devagar. É possível até mesmo mesclar de fontes fora do Fleet Engine e estilizar o objeto Polyline com base nessas informações.

Você pode especificar as personalizações usando parâmetros fornecidos em FleetEngineVehicleLocationProviderOptions. Você pode definir personalizações para diferentes estados do caminho na jornada do veículo: já percorrido, viajando ativamente ou ainda não viajando. Os parâmetros são os seguintes:

Mudar o estilo de objetos Polyline usando PolylineOptions

O exemplo a seguir mostra como configurar o estilo de um objeto Polyline 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',
};

Mudar o estilo de objetos Polyline usando funções de personalização

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

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'});
      }
    }
  };

Controlar a visibilidade de objetos Polyline

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

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Renderizar objetos Polyline com reconhecimento de tráfego

O Fleet Engine retorna dados de velocidade do tráfego para os caminhos ativos e restantes do veículo seguido. É possível usar essas informações para estilizar os 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'});
      }
    }
  };

Mostrar um InfoWindow para um marcador de veículo ou local

Você pode usar um InfoWindow para exibir 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.

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();

Desativar o ajuste automático

Desative o ajuste automático para impedir que o mapa se ajuste automaticamente à janela de visualização ao veículo e ao trajeto antecipado. O exemplo a seguir mostra como desativar o ajuste automático ao configurar a visualização de mapa do compartilhamento de jornada.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Substituir um mapa

Você pode substituir um mapa que inclua marcadores ou outras personalizações sem perder o acesso a elas.

Por exemplo, suponha que você tenha uma página da Web com uma entidade google.maps.Map padrão em que um marcador é exibido:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      // Initialize and add the map
      function initMap() {
        // The location of Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // The map, initially centered at Mountain View, CA.
        var map = new google.maps.Map(document.getElementById("map"));
        map.setOptions({ center: { lat: 37.424069, lng: -122.0916944 }, zoom: 14 });

        // The marker, now positioned at Oracle Park
        var marker = new google.maps.Marker({ position: oraclePark, map: map });
      }
    </script>
    <!-- Load the API from the specified URL.
      * The async attribute allows the browser to render the page while the API loads.
      * The key parameter will contain your own API key (which is not needed for this tutorial).
      * The callback parameter executes the initMap() function.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    ></script>
  </body>
</html>

Para adicionar a biblioteca JavaScript Journey Share, que inclui Fleet Tracking:

  1. Adicione o código da fábrica de tokens de autenticação.
  2. Inicialize um provedor de localização na função initMap().
  3. Inicialize a visualização de mapa na função initMap(). A visualização contém o mapa.
  4. Mova a personalização para a função de callback para a inicialização da visualização de mapa.
  5. Adicione a biblioteca de localização ao carregador da API.

O exemplo a seguir mostra as mudanças a serem feitas:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      let locationProvider;

      // (1) Authentication Token Fetcher
      function authTokenFetcher(options) {
        // options is a record containing two keys called
        // serviceType and context. The developer should
        // generate the correct SERVER_TOKEN_URL and request
        // based on the values of these fields.
        const response = await fetch(SERVER_TOKEN_URL);
            if (!response.ok) {
              throw new Error(response.statusText);
            }
            const data = await response.json();
            return {
              token: data.Token,
              expiresInSeconds: data.ExpiresInSeconds
            };
      }

      // Initialize and add the map
      function initMap() {
        // (2) Initialize location provider. Use FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          YOUR_PROVIDER_ID,
          authTokenFetcher,
        });

        // (3) Initialize map view (which contains the map).
        const mapView = new google.maps.journeySharing.JourneySharingMapView({
          element: document.getElementById('map'),
          locationProviders: [locationProvider],
          // any styling options
        });

      mapView.addListener('ready', () => {
        locationProvider.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

          // The location of Oracle Park
          var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
          // The map, initially centered at Mountain View, CA.
          var map = mapView.map;
          map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
          // The marker, now positioned at Oracle Park
          var marker = new google.maps.Marker({position: oraclePark, map: map});
        };
      }
    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta"
    ></script>
  </body>
</html>

Se você opera um veículo com o ID especificado perto do Oracle Park, ele vai ser renderizado no mapa.