Esta seção mostra como usar a biblioteca de rastreamento de frota do JavaScript para rastrear um veículo para viagens sob demanda ou tarefas programadas.
Para rastrear um veículo, siga estas etapas:
- Carregar a biblioteca e inicializar a visualização do mapa
- Fornecer a localização do veículo e a visualização do mapa
- Detectar eventos e processar erros
- Parar o rastreamento
Carregar a biblioteca e inicializar a visualização do mapa
Para mostrar as operações da frota em um mapa na página da Web, use um script que chame um mapa usando sua chave de API. O exemplo abaixo mostra como fazer isso pelo HTML:
URL source: chama a API Google Maps para solicitar um mapa usando sua chave de API.
Parâmetro
callback
: executa a funçãoinitMap
depois que a API retorna a chamada.Parâmetro
libraries
: carrega a biblioteca de rastreamento da frota.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" defer></script>
Fornecer a localização do veículo e a visualização do mapa
Para começar a rastrear um veículo, você instancia um provedor de localização de veículo e inicializa uma visualização de mapa com o ID do veículo, conforme descrito nas seções a seguir.
Instanciar um provedor de localização de veículo
A biblioteca de rastreamento de frotas em JavaScript inclui um provedor de local para a API Fleet Engine. Use o ID do projeto e uma referência ao coletor de tokens para instanciá-lo, conforme mostrado nos exemplos a seguir.
Viagens sob demanda
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',
});
Tarefas agendadas
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
Inicializar a visualização de mapa
Depois de carregar a biblioteca, inicialize a visualização de mapa e adicione à página HTML. Sua página precisa conter um elemento <div> que contenha a visualização do mapa. O elemento <div> é chamado de map_canvas nos exemplos a seguir.
Viagens sob demanda
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// 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 want.
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],
});
// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Tarefas agendadas
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-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 want.
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],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Detectar eventos e processar erros
Depois de começar a rastrear um veículo, você quer atualizar o progresso dele em um mapa e resolver erros à medida que o veículo percorre a rota.
Detectar eventos de veículos
Para acompanhar o progresso de um veículo para viagens sob demanda ou tarefas programadas, você precisa detectar eventos de alteração.
Você recupera metadados do objeto vehicle
ou deliveryVehicle
usando o
provedor de local. As metainformações incluem o ETA e a distância restante até a próxima coleta ou entrega do veículo. Mudanças nas metainformações
acionam um evento de atualização no provedor de local.
O exemplo a seguir mostra como detectar esses eventos de mudança.
Viagens sob demanda
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);
}
});
Tarefas agendadas
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
Solucionar erros
Depois de carregar a biblioteca JavaScript Journey Sharing, inicialize a visualização do mapa e a adicione à página HTML. Sua página precisa conter um elemento <div> que contenha a visualização do mapa. O elemento <div> é chamado de map_canvas nos exemplos a seguir.
Viagens sob demanda
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// 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 want.
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],
});
// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Tarefas agendadas
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-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 want.
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],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Parar de monitorar um veículo
Para interromper o rastreamento de um veículo, você precisa removê-lo do provedor de localização e remover o provedor de localização da visualização do mapa, conforme descrito nas seções a seguir. Os exemplos aqui se aplicam a viagens sob demanda e implementação de tarefas programadas.
Remover um veículo do provedor de local
Para impedir que o provedor de local rastreie um veículo, remova o ID do veículo de entrega do provedor de local.
Viagens sob demanda
JavaScript
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
Tarefas agendadas
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
Remover o provedor de local da visualização do mapa
O exemplo a seguir mostra como remover um provedor de local da visualização do mapa.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);