A biblioteca JavaScript de rastreamento de frota permite visualizar a localização dos
veículos das suas frotas quase em tempo real. A biblioteca usa a API
On Demands and Deliveries
para permitir a visualização de veículos e viagens. A biblioteca JavaScript de rastreamento
de frota 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
se conectar ao Fleet Engine.
Componentes
A biblioteca JavaScript Fleet Tracking oferece componentes para a visualização de veículos e waypoints, além de feeds de dados brutos para HEC ou distância restante de uma viagem.
Visualização de mapa do rastreamento de frota
O componente de visualização de mapa "Rastreamento de frota" mostra a localização dos veículos e os waypoints das viagens. Se o trajeto de um veículo for conhecido, o componente de visualização de mapa vai animar o veículo à medida que ele se mover pelo caminho previsto.
Provedores de localização
Os provedores de localização trabalham com as informações armazenadas no Fleet Engine para enviar informações de local dos objetos rastreados para o mapa de compartilhamento de 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. 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 filtrar para mostrar um veículo específico e a localização dele ou mostrar os locais 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: o uso de um provedor de localização personalizado ou derivado pode mudar as regras de visibilidade.
Vehicles
Um veículo fica visível assim que é criado no Fleet Engine e fica visível
quando ovehicle_state é 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 do waypoint
Um marcador de local do waypoint indica pontos ao longo da jornada de um veículo, começando na origem e terminando com o destino final. Os marcadores de local do waypoint 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 aparecem 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 de viagem e veículo.
Criar uma reivindicação de ID de viagem e de veículo
Para rastrear veículos usando o provedor de localização do veículo, crie um JSON Web Token (JWT) com um ID da viagem e uma declaração de 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 precisa ser criado usando o papel do Cloud IAM de Superusuário do serviço do Fleet Engine. Isso concede amplo acesso para criar, ler e modificar entidades do Fleet Engine e só deve ser compartilhado com usuários confiáveis.
Confira no exemplo a seguir 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 de rastreamento de frota JavaScript solicita um token usando o coletor de tokens de autenticação quando uma das seguintes condições é 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 vai usar o token válido emitido anteriormente e não chamará 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 somente nos seus servidores e nunca compartilhar seus 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 passar o tempo de expiração (em segundos, a partir do momento da busca) para a biblioteca, conforme mostrado no exemplo.
- O SERVER_TOKEN_URL depende da implementação do back-end. Estes 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
- https://
Carregar um mapa usando o HTML
O exemplo a seguir mostra como carregar a biblioteca de Compartilhamento de jornada do JavaScript usando 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 sua 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 de rastreamento de frota para acompanhar um veículo. Carregue a biblioteca da função de callback especificada na 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 a API On Demand Rides and Deliveries. Use seu ID do projeto e uma referência à sua 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 de compartilhamento de jornada do JavaScript, inicialize a visualização de mapa e adicione-a à página HTML. Sua página precisa conter um elemento <div> que contenha a visualização de mapa. O elemento <div> é chamado de map_canvas no exemplo abaixo.
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);
Detectar eventos de mudança
É possível recuperar metainformações sobre um veículo do objeto vehicle
usando o provedor de localização. Elas incluem a HEC e a distância restante
antes da próxima embarque ou desembarque do veículo. Alterações nas informações
de meta 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
Os erros que surgem de forma assíncrona da solicitação de informações sobre o 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 de Compartilhamento de jornada do JavaScript para visualizar uma frota de veículos. Carregue a biblioteca 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 um provedor de localização que busca vários veículos da API On Demand Rides and Deliveries. Use o ID do projeto e uma referência ao coletor de tokens para criar uma instância.
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 os veículos mostrados no mapa.
Esse filtro é transmitido diretamente para o Fleet Engine. Consulte os formatos aceitos em ListVehiclesRequest.
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 da localização não será iniciado até que essa opção seja definida.
Depois que o provedor de localização for criado, inicialize a visualização de mapa.
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 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;
}
});
Detectar eventos de mudança
É 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. Alterar para as metainformações acionam 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 ocorrem de forma assíncrona ao solicitar informações da frota de veículos acionam eventos de erro. Para 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 dele como nulos.
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 de base
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, é possível criar e editar estilos para qualquer um dos seus apps que usam o Google Maps no console do Google Cloud sem precisar mudar o código. Esses estilos são salvos como IDs no projeto do Cloud. Para aplicar um estilo ao mapa de rastreamento de frota em JavaScript, especifique um mapId
ao criar o JourneySharingMapView
. O campo mapId
não pode ser alterado
ou adicionado após o JourneySharingMapView
ser instanciado. O exemplo a seguir mostra como ativar um estilo de mapa criado anteriormente com um ID do mapa.
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 a estilização 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 personalizações de 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 a biblioteca de rastreamento de frota vai aplicar antes de adicionar marcadores ao mapa e a cada atualização deles.
Você pode criar uma personalização simples especificando um objeto MarkerOptions
para aplicar a todos os marcadores do mesmo tipo. As alterações especificadas no objeto são aplicadas após a criação de cada marcador, substituindo as opções padrão.
Como uma opção mais avançada, você pode especificar uma função de personalização. Com as funções de personalização, é possível estilizar os marcadores com base em dados, além de adicionar interatividade aos marcadores, como o gerenciamento de cliques. Especificamente, o rastreamento de frota passa 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. Você pode até combinar 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 o filtro
nativo no provedor de localização, como
FleetEngineFleetLocationProvider.vehicleFilter
.
Dito isso, quando você precisar de mais funcionalidades de filtragem, poderá aplicar
a filtragem usando a função de personalização.
A biblioteca de rastreamento de frota 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 este 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'
};
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. Siga esse padrão para personalizar o estilo de qualquer marcador usando qualquer um dos parâmetros de personalização 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 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 o processamento de cliques a qualquer marcador usando os 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 os marcadores de veículo visíveis. Siga esse padrão para filtrar 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ê pode personalizar no mapa a aparência do trajeto do veículo seguido. A biblioteca cria um objeto google.maps.Polyline para cada par de coordenadas no caminho ativo ou restante do veículo.
Você pode definir o estilo dos objetos Polyline
especificando personalizações de polilinha. Em seguida, 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, você pode especificar um conjunto de PolylineOptions
para aplicar a todos os objetos Polyline
correspondentes quando eles são criados ou atualizados.
Da mesma forma, é possível especificar uma função de personalização. As funções de personalização
permitem aplicar estilos individuais 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, colorindo o objeto Polyline
em uma tonalidade mais profunda ou
tornando-o mais espesso quando o veículo está se movendo mais devagar. É possível até mesclar fontes de fora do Fleet Engine e estilizar o objeto Polyline
com base nessas informações.
Você pode especificar as personalizações usando os parâmetros fornecidos em
FleetEngineVehicleLocationProviderOptions
.
Você pode definir personalizações para diferentes estados de caminho na jornada do veículo: já percorrido, viajando ativamente ou ainda não percorrido. Os
parâmetros são os seguintes:
takenPolylineCustomization
, para um caminho já percorrido;activePolylineCustomization
, para um caminho de viagem ativo.remainingPolylineCustomization
, para um caminho ainda não 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 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 dos objetos Polyline
usando funções de personalização
O exemplo abaixo mostra como configurar o estilo de um objeto Polyline
ativo. Siga esse 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.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 de tráfego para os caminhos ativo e restante do
veículo seguido. Use 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 veículo ou marcador de local
Você pode usar um InfoWindow
para mostrar mais informações sobre um veículo ou marcador de local.
O exemplo a seguir mostra como criar um InfoWindow
e anexá-lo a um marcador de veículo.
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 ajuste automático
Para impedir que o mapa ajuste automaticamente a janela de visualização ao veículo e ao trajeto previsto, desative o ajuste automático. 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 essas personalizações.
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 Shared, que inclui o rastreamento de frota:
- Adicione o código da fábrica de tokens de autenticação.
- Inicialize um provedor de localização na função
initMap()
. - Inicialize a visualização de mapa na função
initMap()
. que contém o mapa. - Mova sua personalização para a função de callback referente à inicialização da visualização de mapa.
- 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.