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

A biblioteca JavaScript Fleet Tracking permite que você visualize os locais dos nas suas frotas quase em tempo real. A biblioteca usa o modelo On Demand Transportes e entregas API para permitir a visualização de veículos e viagens. A frota de JavaScript A biblioteca de acompanhamento contém um componente de mapa JavaScript que é um drop-in para uma entidade google.maps.Map padrão e componentes de dados para para se conectar ao Fleet Engine.

Componentes

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

Visualização de mapa do rastreamento de frota

O componente de visualização de mapa do rastreamento de frota mostra a localização de veículos e os waypoints da viagem. Se o trajeto de um veículo for conhecido, o componente de visualização de mapa anima esse veículo conforme ele se move ao longo de seu caminho previsto.

Provedores de localização

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

Provedor de localização do veículo

O provedor de localização do veículo exibe as informações de localização de um único veículo. Ela tem informações sobre a localização do veículo e a viagem atual atribuídas ao veículo

Provedor de localização de frotas

O provedor de localização da frota mostra informações de localização de vários veículos. Você pode filtrar para exibir um veículo específico e sua localização ou pode mostrar as localizações de veículos de toda a frota.

Controlar a visibilidade dos locais rastreados

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

Veículos

Um veículo fica visível assim que é criado no Fleet Engine e fica visível quando o veículo_state for Online. Isso significa que um veículo pode ficar visível quando não há uma viagem atribuída ao veículo.

Marcadores de local do waypoint

Um marcador de local de waypoint indica pontos ao longo do início da viagem de um veículo com a origem e terminando com o destino final. O local do ponto de referência marcadores podem ser definidos da seguinte maneira:

• Origem: indica o local de partida da viagem do veículo.
• Intermediário: indica paradas na viagem do veículo
• Destino: indica o local final da viagem do veículo

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

Introdução à biblioteca JavaScript Fleet Tracking

Antes de usar a biblioteca JavaScript Fleet Tracking, você precisa conhecer ao Fleet Engine e ao receber uma API chave. Em seguida, crie uma reivindicação de ID de viagem e veículo.

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

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

Para criar o payload do JWT, adicione uma declaração extra na seção de autorização com as chaves tripid e vehicleid e defina o value de cada chave como *. O token deve ser criado usando o Cloud de superusuário do serviço do Google Fleet Engine papel do IAM. Isso concede acesso amplo para criar, ler e modificar frotas Engine e só devem ser compartilhados com usuários confiáveis.

O exemplo a seguir mostra como criar um token para rastreamento 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 quando uma das seguintes condições for verdadeira:

• Não tem um token válido, como quando não chamou o coletor em um novo carregamento de página ou quando o coletor 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 usará o token válido ainda emitido anteriormente e usará não chamar o coletor.

Você pode criar um coletor de tokens de autenticação para recuperar um token criado com as declarações apropriadas nos servidores usando uma conta de serviço certificado para seu projeto. É importante criar tokens somente e nunca compartilhe seus certificados com clientes. Caso contrário, você pode compromete a segurança do seu sistema.

O coletor deve retornar um objeto data estrutura com dois campos, encapsulados em uma promessa:

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

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

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

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 fabricar tokens, mantenha o o seguinte:

• O endpoint precisa retornar um prazo de validade para o token. no exemplo acima, recebe o valor como data.ExpiresInSeconds.
• O coletor de tokens de autenticação deve passar o tempo de expiração (em segundos, a partir momento da busca) à biblioteca, como mostrado no exemplo.
• O SERVER_TOKEN_URL depende da sua implementação do back-end, eles são URLs de exemplo:
  • https://SERVER_URL/token/driver/VEHICLE_ID
  • https://SERVER_URL/token/consumer/TRIP_ID
  • https://SERVER_URL/token/fleet_reader

Carregar um mapa usando o HTML

O exemplo a seguir mostra como carregar a biblioteca de Compartilhamento de jornada do JavaScript. de um URL específico. O parâmetro callback executa a função initMap após o carregamento da API. O atributo defer permite que o navegador continue a renderização 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

Esta seção mostra como usar a biblioteca JavaScript Fleet Tracking para seguir um veículo Certifique-se de carregar a biblioteca a partir da função de retorno de chamada especificada no a tag de script antes de executar o código.

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

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

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

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

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 de Compartilhamento de jornada do JavaScript, inicialize a visualização de mapa. e adicioná-lo à página HTML. Sua página deve conter um elemento <div> que contém a visualização de mapa. O elemento <div> chama-se <div> no exemplo abaixo.

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

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

Detectar eventos de mudança

É possível recuperar metainformações sobre um veículo do objeto vehicle. usando o provedor de localização. As metainformações incluem a HEC e os distância antes da próxima embarque ou desembarque do veículo. Alterações na meta informações acionam um evento update. O exemplo a seguir mostra como detectar a esses eventos de alteração.

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

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 ocorrem de forma assíncrona ao solicitar o acionador de informações do veículo eventos de erro. O exemplo a seguir mostra como detectar esses eventos no para lidar com erros.

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

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 do provedor de localização.

locationProvider.vehicleId = '';

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.

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Conferir uma frota de veículos

Esta seção mostra como usar a biblioteca de Compartilhamento de jornada do JavaScript para exibir uma frota de veículos. Carregue a biblioteca a partir da função de callback. especificada na tag de 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. Use seu ID do projeto, bem como uma referência ao seu coletor de token para instanciá-lo.

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

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 os veículos mostrados no mapa. Esse filtro é transmitido diretamente para o Fleet Engine. Consulte ListVehiclesRequest para 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. Rastreamento de localização não será iniciado até que isso seja definido.

Depois que o provedor de localização for construído, inicialize o mapa visualização.

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

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

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

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

Detectar eventos de mudança

É possível recuperar metainformações sobre a frota do objeto vehicles. usando o provedor de localização. As metainformações incluem propriedades do veículo tais como status da navegação, distância até o próximo ponto de referência e atributos personalizados; ver referência documentação para mais detalhes. Alterar para as metainformações acionam um evento de atualização. A exemplo a seguir mostra como detectar esses eventos de mudança.

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

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

Erros que ocorrem de forma assíncrona na solicitação de informações da frota de veículos acionarão eventos de erro. Para ver exemplos de como detectar esses eventos, consulte para 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.

locationProvider.locationRestriction = null;

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.

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Personalizar a aparência do mapa de base

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

Usar a Estilização de mapas baseada na nuvem

Estilização de mapas baseada na nuvem permite criar e editar estilos de mapa para qualquer um dos seus apps que usam o Google Maps no console do Google Cloud sem precisar alterar o código. A Os estilos de mapa são salvos como IDs no projeto do Cloud. Para aplicar um estilo Mapa de rastreamento de frota em JavaScript, especifique um mapId quando você cria a JourneySharingMapView. Não é possível alterar o campo mapId ou adicionado após o JourneySharingMapView ter sido instanciado. O seguinte mostra como ativar um estilo de mapa criado anteriormente com um ID de mapa.

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

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 a estilização do mapa é definir mapOptions quando você cria a JourneySharingMapView.

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

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 personalizações de marcadores

Com a biblioteca JavaScript Fleet Tracking, você pode personalizar a aparência de marcadores adicionados ao mapa. Para fazer isso, especifique personalizações de marcador, que a Fleet Tracking Library aplica antes de adicionar marcadores ao mapa. e a cada atualização de marcador.

É possível criar uma personalização simples especificando MarkerOptions a ser aplicado a todos os marcadores do mesmo tipo. As mudanças especificadas no são aplicados depois que cada marcador é criado, substituindo qualquer .

Como uma opção mais avançada, você pode especificar uma função de personalização. As funções de personalização permitem definir o estilo dos marcadores com base em dados, bem como como adicionar interatividade aos marcadores, como o gerenciamento de cliques. Especificamente, frota O acompanhamento transmite dados para a função de personalização sobre o tipo de objeto que o O marcador representa: veículo, parada ou tarefa. Isso permite que o estilo do marcador alteração com base no estado atual do próprio elemento marcador; por exemplo, os número de paradas restantes ou tipo de tarefa. Você pode até mesmo mesclá-los com dados de fora do Fleet Engine e estilize 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 filtrar com os filtragem no provedor de localização, como FleetEngineFleetLocationProvider.vehicleFilter Quando você precisar de mais funcionalidades de filtragem, filtragem usando a função de personalização.

A biblioteca de rastreamento de frota oferece os seguintes parâmetros de personalização:

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

Mudar o estilo dos marcadores usando MarkerOptions

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

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Mudar 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. Seguir este padrão para personalizar o estilo de qualquer marcador usando qualquer um dos elementos os parâmetros de personalização listados acima.

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

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

Adicionar o gerenciamento de cliques aos marcadores

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

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

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

Filtrar marcadores visíveis

O exemplo a seguir mostra como filtrar os marcadores de veículo visíveis. Siga este padrão para filtrar marcadores usando qualquer uma das opções de personalização parâmetros listados acima.

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

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 o trajeto do veículo seguido no mapa. A biblioteca cria uma google.maps.Polyline para cada par de coordenadas na coluna ativa ou restante do veículo path. Você pode definir o estilo dos objetos Polyline especificando personalizações de polilinha. A aplica essas personalizações em duas situações: antes de adicionar a objetos ao mapa e quando os dados usados para os objetos forem alterados.

Assim como na personalização de marcadores, você pode especificar um conjunto de PolylineOptions seja aplicada a todos os objetos Polyline correspondentes quando forem criados ou atualizados.

Da mesma forma, é possível especificar uma função de personalização. Funções de personalização permitem a estilização individual dos objetos com base nos dados enviados pelo Fleet Engine. A função pode alterar o estilo de cada objeto com base no estado atual do o veículo por exemplo, colorir o objeto Polyline com uma tonalidade mais forte ou tornando-a mais espesso quando o veículo está se movendo mais devagar. Você pode até mesmo se juntar a de origens fora do Fleet Engine e estilizar o objeto Polyline com base nisso informações imprecisas ou inadequadas.

É possível especificar as personalizações usando parâmetros fornecidos no FleetEngineVehicleLocationProviderOptions Você pode definir personalizações para diferentes estados do caminho no jornada: já percorrido, viajando ativamente ou ainda não percorrido. A são os seguintes:

• takenPolylineCustomization, para um caminho já percorrido;
• activePolylineCustomization, para um caminho ativo;
• remainingPolylineCustomization, para um caminho que ainda não foi percorrido.

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 qualquer das personalizações de polilinha listadas anteriormente.

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

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

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

O exemplo abaixo mostra como configurar um objeto Polyline ativo estilizaçã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 anteriormente.

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

// 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 criar um objeto Polyline invisível, defina visible :

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};

Renderizar objetos Polyline com reconhecimento de tráfego

O Fleet Engine retorna dados de velocidade de tráfego para os caminhos ativo e restante de o veículo seguido. Use essas informações para definir o estilo do Polyline. de acordo com as velocidades de tráfego:

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

// 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 veículo ou marcador de local

Você pode usar um InfoWindow para exibir informações adicionais 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.

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

// 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 ajuste automático

Você pode impedir que o mapa ajuste automaticamente a janela de visualização ao veículo e trajeto previsto desativando o ajuste automático. O exemplo a seguir mostra como desativar o ajuste automático ao configurar o mapa de compartilhamento da jornada visualização.

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

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 as personalizações.

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

<!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 Shared, que inclui o rastreamento de frota:

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 as mapa.
4. Mova sua personalização para a função de callback da visualização de mapa inicialização do sistema.
5. Adicione a biblioteca de localização ao carregador de API.

O exemplo a seguir mostra as mudanças que precisam ser 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 é renderizado no mapa.