W tej sekcji pokazujemy, jak za pomocą biblioteki śledzenia JavaScriptu śledzić do podróży na żądanie lub zaplanowanych zadań.
Aby śledzić pojazd:
- Wczytanie biblioteki i zainicjowanie widoku mapy
- Udostępnianie lokalizacji pojazdu i widoku mapy
- Wykrywanie zdarzeń i obsługa błędów
- Przestań śledzić
Wczytanie biblioteki i zainicjowanie widoku mapy
Aby wyświetlić operacje floty na mapie na stronie internetowej, użyj skrypt wywołujący mapę za pomocą klucza interfejsu API. Ten przykład pokazuje, w tym celu z poziomu HTML:
Źródło adresu URL: wywołuje interfejs API Map Google, aby przesłać żądanie mapy przy użyciu klucza interfejsu API.
Parametr
callback
: uruchamia funkcjęinitMap
po zwróceniu wywołania przez interfejs API.Parametr
libraries
: wczytuje bibliotekę śledzenia floty.Atrybut
defer
: pozwala przeglądarce kontynuować renderowanie pozostałej części podczas wczytywania interfejsu API.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Udostępnianie lokalizacji pojazdu i widoku mapy
Aby zacząć śledzić pojazd, zarówno Ty, jak i osoba musicie utworzyć instancję dostawcy lokalizacji pojazdu i zainicjować widok mapy z identyfikatorem pojazdu w sposób opisany poniżej. sekcji.
Utwórz instancję dostawcy lokalizacji pojazdu
Biblioteka śledzenia floty JavaScript zawiera dostawcę lokalizacji dla floty Engine API. Użyj identyfikatora projektu i odwołania do modułu pobierania tokenów aby utworzyć jego instancję w sposób podany w następujących przykładach.
Podróże na żądanie
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',
});
Zaplanowane zadania
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',
});
Inicjowanie widoku mapy
Po wczytaniu biblioteki udostępniania czynności JavaScript zainicjuj ją. widok mapy i dodać go do strony HTML. Strona powinna zawierać element <div> zawierający widok mapy. Element <div> w poniższych przykładach ma nazwę map_canvas.=
Podróże na żądanie
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);
Zaplanowane zadania
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);
Wykrywaj zdarzenia i obsługuj błędy
Po rozpoczęciu śledzenia pojazdu chcesz aktualizować jego postępy na mapie i eliminować błędy w czasie, gdy pojazd porusza się po swojej trasie.
Nasłuchuj zdarzeń dotyczących pojazdów
Aby śledzić postęp pojazdu w przypadku podróży na żądanie lub zaplanowanych zadań: musisz nasłuchiwać zdarzeń zmian.
Metatag jest pobierany z obiektu vehicle
lub deliveryVehicle
za pomocą
dostawcy lokalizacji. Metadane obejmują szacowany czas dotarcia na miejsce i pozostałą odległość
przed następnym odbiorem lub zwrotem pojazdu. Zmiany metadanych
wywołać zdarzenie update u dostawcy lokalizacji.
Z przykładu poniżej dowiesz się, jak nasłuchiwać zdarzeń zmian.
Podróże na żądanie
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);
}
});
Zaplanowane zadania
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);
}
});
Obsługa błędów
Po wczytaniu biblioteki udostępniania czynności JavaScript zainicjuj ją. widok mapy i dodać go do strony HTML. Strona powinna zawierać element <div> zawierający widok mapy. Element <div> w poniższych przykładach ma nazwę map_canvas.=
Podróże na żądanie
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);
Zaplanowane zadania
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);
Przestań śledzić pojazd
Aby przestać śledzić pojazd, musisz usunąć go u dostawcy lokalizacji. usunąć dostawcę lokalizacji z widoku mapy w sposób opisany poniżej sekcji. Podane tu przykłady dotyczą zarówno podróży na żądanie, jak i zaplanowanych zadań implementacji.
Usuwanie pojazdu u dostawcy lokalizacji
Aby uniemożliwić dostawcy lokalizacji śledzenie pojazdu, usuń identyfikator pojazdu dostawy.
Podróże na żądanie
JavaScript
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
Zaplanowane zadania
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
Usuń dostawcę lokalizacji z widoku mapy
Poniższy przykład pokazuje, jak usunąć dostawcę lokalizacji z widoku mapy.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);