Rastrear remessas com a biblioteca de rastreamento de envio JavaScript

Com a biblioteca JavaScript Shipment Tracking, você pode conferir o local de veículos e locais de interesse monitorados no Fleet Engine. A biblioteca contém um componente de mapa JavaScript que é uma substituição simples para que uma entidade google.maps.Map padrão e componentes de dados se conectem com o Fleet Engine. Com a biblioteca JavaScript Shipment Tracking, é possível oferecer uma experiência personalizável e animada de rastreamento de remessas a partir do seu aplicativo da Web.

Componentes

A biblioteca JavaScript Shipment Tracking fornece componentes para visualização do veículo e do trajeto à medida que ele progride até um destino, bem como dados brutos feeds para o HEC de um motorista ou a distância restante.

Visualização de mapa do rastreamento de envio

O componente de visualização de mapa mostra a localização de veículos e destinos. Se o trajeto de um veículo for conhecido, o componente de visualização de mapa será animado esse veículo conforme ele se move ao longo de seu caminho previsto.

Provedor do local de envio

Um provedor de localização de remessa fornece informações de localização para objetos rastreados no mapa de rastreamento da remessa da primeira e última milha.

Você pode usar o provedor de localização de remessa para rastrear:

  • O local de retirada ou entrega de uma remessa.
  • A localização e a rota do veículo de entrega.

Objetos de local rastreados

O provedor de localização rastreia a localização de objetos, como veículos e destinos.

Local de destino

O local de destino é o local onde uma jornada termina. Para envio é o local planejado da tarefa.

Localização do veículo

O local do veículo é o local monitorado de um veículo. Ele pode, opcionalmente, incluir um trajeto para o veículo.

Coletor de tokens de autenticação

Para controlar o acesso aos dados de local armazenados no Fleet Engine, você precisa implementar um serviço de criação de JSON Web Token (JWT) para o Fleet Engine. no seu servidor. Em seguida, implemente um coletor de tokens de autenticação como parte do seu aplicativo da Web usando a biblioteca JavaScript Journey Tracking para autenticar o acesso aos dados de localização.

Opções de estilo

Os estilos de marcador e polilinha determinam a aparência do objetos de local rastreado no mapa. Você pode usar opções de estilo personalizado para alterar o estilo padrão de acordo com o estilo do seu aplicativo da Web.

Controlar a visibilidade dos locais rastreados

Esta seção descreve os controles de visibilidade para objetos rastreados no mapa. Essas regras se aplicam a duas categorias de objetos:

  • Marcador de local
  • Dados da tarefa

Visibilidade do marcador de local

Todos os marcadores de local para a origem e o destino são sempre mostrados no mapa. Por exemplo, um local de entrega de remessa é sempre mostrado no mapa, seja qual for o estado da entrega.

Visibilidade dos dados da tarefa

Esta seção descreve as regras de visibilidade padrão que se aplicam aos dados da tarefa, como a localização do veículo e o trajeto restante. Você pode personalizar muitas tarefas, não todos:

  • Tarefas de indisponibilidade: não é possível personalizar a visibilidade dessas tarefas.
  • Tarefas ativas no veículo : você pode personalizar esse tipo de tarefa.
  • Tarefas com veículos inativos -- Não é possível personalizar a visibilidade dessas tarefas.

Tarefas de indisponibilidade

Se houver pelo menos uma tarefa de indisponibilidade (por exemplo, se o motorista estiver fazendo uma pausa ou se o veículo estiver sendo reabastecido) no trajeto para a tarefa monitorada, o veículo não fica visível. Previsão de chegada o tempo e o tempo estimado para a conclusão da tarefa ainda estão disponíveis.

Tarefas ativas com o veículo

A TaskTrackingInfo fornece uma série de elementos de dados que podem ser tornados visíveis dentro do Shipment Tracking. Por padrão, esses campos ficam visíveis quando a tarefa é atribuído ao veículo e quando ele está a até cinco paradas da tarefa. A a visibilidade termina quando a tarefa é concluída ou cancelada. Os campos são da seguinte forma:

  • Polilinhas do trajeto
  • Tempo estimado para chegada
  • Tempo estimado para a conclusão da tarefa
  • Distância de carro restante até a tarefa
  • Contagem de paradas restantes
  • Localização do veículo

Para personalizar a configuração de visibilidade por tarefa, defina as TaskTrackingViewConfig em uma tarefa ao criá-la ou atualizá-la no Fleet Engine. Isso cria regras de quando elementos de dados individuais estão disponíveis, que podem ser baseados nos seguintes critérios (chamados de opção de visibilidade abaixo):

  • Contagem de paradas restantes
  • Duração até o horário previsto de chegada
  • Distância de carro restante
  • Sempre visível
  • Nunca visíveis

Cada elemento de dados só pode ser associado a uma opção de visibilidade. Não é possível combinar critérios usando OR ou AND.

Confira abaixo um exemplo de personalização. As regras dessa personalização são:

  • Mostre as polilinhas do trajeto se o veículo estiver a até três paradas.
  • Mostrar o HEC se a distância de carro restante for menor do que 5.000 metros.
  • Nunca mostrar o número de paradas restantes.
  • Todos os outros campos mantêm a visibilidade padrão que é mostrada quando o veículo está a cinco paradas da tarefa.
"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Você também pode personalizar a configuração de visibilidade padrão do seu projeto entrar em contato com a equipe de suporte.

Regras de visibilidade da localização de veículos e polilinhas do trajeto:

Quando as polilinhas do trajeto estão visíveis, a localização do veículo também precisa estar, Caso contrário, a localização do veículo pode ser indicada pelo final das polilinhas. Isso significa que as polilinhas do trajeto não podem ter uma opção de visibilidade menos restritiva.

Essas regras precisam ser seguidas para informar um veículo / polilinhas de trajeto válidas combinação de visibilidade do local:

  • Quando as polilinhas do trajeto e a localização do veículo têm a mesma opção de visibilidade type

    • Se a opção de visibilidade for a contagem de paradas restantes, a duração até o HEC ou distância restante, as polilinhas do trajeto devem ter um valor que seja menor ou igual ao valor definido para esta opção de visibilidade para o veículo o local. Confira um exemplo:
    "taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingStopCountThreshold": 5
  },
}
    • Se as polilinhas do trajeto tiverem uma opção de visibilidade sempre visível, a localização do veículo também precisam fornecer uma opção de visibilidade sempre visível.
    • Se a localização do veículo tiver uma opção de visibilidade "Nunca visível", as polilinhas do trajeto também devem fornecer a opção de visibilidade nunca visível.

  • Quando as polilinhas do trajeto e a localização do veículo têm opções de visibilidade diferentes tipos, a localização do veículo só fica visível quando os dois botões de visibilidade forem atendidas.

    Confira um exemplo:

    "taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingDrivingDistanceMetersThreshold": 3000
  },
}

    Neste exemplo, a localização do veículo só fica visível se a parada restante a contagem é de pelo menos 3 E a distância de carro restante é de pelo menos 3.000 metros.

Introdução à biblioteca de compartilhamento de jornada do JavaScript

Antes de usar a biblioteca de compartilhamento de jornada do JavaScript, conhecer o Fleet Engine e como conseguir uma chave de API.

Para rastrear uma entrega, primeiro crie uma reivindicação de ID de acompanhamento.

Criar uma reivindicação do ID de acompanhamento

Para rastrear um envio usando o provedor de local de envio, faça o seguinte: criar um JSON Web Token (JWT) com uma reivindicação de ID de acompanhamento.

Para criar o payload do JWT, adicione uma declaração extra na seção de autorização com a chave trackingid. Defina o valor como o ID de rastreamento de frete.

O exemplo a seguir mostra como criar um token para acompanhamento por ID de acompanhamento:

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

Criar um coletor de tokens de autenticação

É possível criar um coletor de tokens de autenticação para recuperar um token criado com as declarações apropriadas nos servidores certificado de conta do seu projeto. É importante produzir somente tokens nos seus servidores e nunca compartilhe seus certificados com clientes. Caso contrário, você comprometerá a segurança do seu 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 a busca.

A biblioteca JavaScript Shipment Tracking solicita um token por meio do método de autenticaçã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.

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 fabricar tokens, mantenha o o 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 deve passar o tempo de expiração (em segundos, no momento da busca) à biblioteca, como mostrado no exemplo.
  • O SERVER_TOKEN_URL depende da implementação do back-end. Estes são os URLs do back-end do app de exemplo:
    • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
    • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
    • https://SERVER_URL/token/fleet_reader

Carregar um mapa usando o HTML

O exemplo a seguir mostra como carregar o JavaScript Shipment Tracking Biblioteca de um URL especificado. O parâmetro de callback executa a initMap. após o carregamento da API. O atributo defer permite que o navegador continuar 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" defer></script>

Seguir uma remessa

Nesta seção, mostramos como usar a biblioteca JavaScript Shipment Tracking para acompanhar uma entrega ou retirada de uma remessa. Não se esqueça de carregar a biblioteca a partir da função de callback especificada na tag do script antes de executar o código.

Instancie um provedor de localização de remessas

A JavaScript Shipment Tracking Library predefine um provedor de localização para a API Fleet Engine Deliveries. Use seu ID do projeto e uma referência à sua fábrica de tokens para instanciá-lo.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

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

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify tracking ID to
          // immediately start tracking.
          trackingId: 'your-tracking-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á-la à página HTML. Sua página deve conter um elemento &lt;div&gt; que contém a visualização do mapa. No exemplo a seguir, o elemento &lt;div&gt; chama-se &lt;div&gt;.

Para evitar disputas, defina o ID de acompanhamento do provedor de localização no retorno de chamada invocado após a inicialização do mapa.

JavaScript

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

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

TypeScript

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

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

ID de acompanhamento

O ID de acompanhamento informado ao provedor de localização pode corresponder a vários tarefas; por exemplo, uma tarefa de retirada e uma entrega para o mesmo pacote ou várias tentativas de entrega com falha. Uma tarefa foi selecionada para exibição na o mapa de rastreamento de envios. A tarefa a ser mostrada é determinada da seguinte maneira:

  1. Se houver exatamente uma tarefa de retirada aberta, ela será exibida. Um erro é gerado se houver várias tarefas de retirada em aberto.
  2. Se houver exatamente uma tarefa de entrega aberta, ela será mostrada. Ocorreu um erro gerados se houver várias tarefas de entrega em aberto.
  3. Se houver tarefas de entrega fechadas:
    • Se houver exatamente uma tarefa de entrega fechada, ela será mostrada.
    • Se houver várias tarefas de entrega fechadas, aquela com a mais recente o horário do resultado é mostrado.
    • Se houver várias tarefas de entrega encerradas, nenhuma delas terá um resultado tempo, será gerado um erro.
  4. Se houver tarefas de retirada fechadas:
    • Se houver exatamente uma tarefa de retirada fechada, ela será mostrada.
    • Se houver várias tarefas de retirada fechadas, aquela com a mais recente o horário do resultado é mostrado.
    • Se houver várias tarefas de retirada fechadas, nenhuma delas terá um resultado tempo, será gerado um erro.
  5. Caso contrário, nenhuma tarefa será exibida.

Detectar eventos de mudança

Você pode recuperar metainformações sobre uma tarefa nas informações de rastreamento de tarefas usando o provedor de localização. As metainformações incluem o HEC, número de paradas restantes e a distância restante antes do embarque ou da entrega. Alterações nas informações meta acionam um evento update. O exemplo a seguir mostra como detectar esses eventos de mudança.

JavaScript

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

TypeScript

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

Solucionar erros

Erros que surgem de forma assíncrona ao solicitar informações de envio do acionador error. O exemplo a seguir mostra como detectar esses eventos para lidar com 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);
});

Observação:é preciso unir as chamadas de biblioteca em blocos try...catch. para lidar com erros imprevistos.

Parar monitoramento

Para impedir que o provedor de localização rastreie o envio, remova o ID de rastreamento do provedor de localização.

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

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 de base

Para personalizar a aparência do componente Mapa, estimar seu mapa usando ferramentas baseadas na nuvem ou definindo 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. Os estilos são salvos como IDs no seu projeto do Cloud. Para aplicar um estilo mapa de rastreamento de envio em JavaScript, especifique 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.

JavaScript

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

TypeScript

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

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

Outra maneira de personalizar a estilização do mapa é definir mapOptions quando você 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 personalizações de marcadores

Com a biblioteca JavaScript Shipment Tracking, você pode personalizar a aparência e dos marcadores adicionados ao mapa. Você faz isso especificando o marcador que a Shipment Tracking Library aplica antes de adicionar marcadores ao mapa e a cada atualização deles.

A personalização mais simples é especificar um MarkerOptions que será aplicado a todos os marcadores do mesmo tipo. As mudanças especificados no objeto são aplicados depois que cada marcador é criado, substituindo qualquer opção padrão.

Uma opção mais avançada é especificar uma função de personalização. Personalização permitem estilizar os marcadores com base em dados, bem como adicionar interatividade aos marcadores, como o tratamento de cliques. Especificamente, Shipment O acompanhamento transmite dados para a função de personalização sobre o tipo de objeto que o O marcador representa: veículo ou destino. 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 planejadas restantes até o destino. Você pode até mesmo participar usando dados de fontes externas ao Fleet Engine e estilize o marcador com base essas informações.

A biblioteca Shipment Tracking fornece os seguintes parâmetros de personalização em FleetEngineShipmentLocationProviderOptions:

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 este padrão para personalizar o estilo de qualquer marcador usando uma das personalizações listadas acima.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  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.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

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.

JavaScript

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

TypeScript

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

Usar personalizações de polilinha

Com a Shipment Tracking Library, você também pode personalizar a aparência do a rota de envio no mapa. A biblioteca cria uma google.maps.Polyline para cada par de coordenadas na coluna ativa ou restante 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 a ser aplicado a todos os objetos Polyline correspondentes quando eles forem criados. ou atualizadas.

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 a remessa; 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 FleetEngineShipmentLocationProviderOptions 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:

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.

JavaScript

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

TypeScript

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.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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 :

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

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

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 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 a rota prevista ao desativar o ajuste automático. O exemplo a seguir mostra como desativar o ajuste automático ao configurar o compartilhamento da jornada visualização de mapa.

JavaScript

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

TypeScript

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

Substituir um mapa

Use a biblioteca JavaScript Shipment Tracking para 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 Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // 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 Uluru
  var marker = new google.maps.Marker({position: uluru, 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 de compartilhamento de jornada do JavaScript:

  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 sua personalização para a função de callback referente à inicialização da visualização do mapa.
  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.
  locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
    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
  });

  locationProvider.trackingId = TRACKING_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // 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 Uluru
    var marker = new google.maps.Marker({position: uluru, 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.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Se você tem um pacote rastreado com especificado perto de Uluru, ele será renderizado no mapa.