בקטע הזה מוסבר איך להשתמש בספריית JavaScript למעקב אחרי צי כלי רכב כדי לעקוב אחרי רכב לצורך נסיעות על פי דרישה או משימות מתוזמנות.
כדי לעקוב אחרי רכב, מבצעים את הפעולות הבאות:
- טעינה של הספרייה והפעלת תצוגת המפה
- איך מספקים את המיקום של הרכב ואת תצוגת המפה
- האזנה לאירועים וטיפול בשגיאות
- הפסקת המעקב
טעינת הספרייה והפעלת תצוגת המפה
כדי להציג את פעולות הצי במפה בדף האינטרנט, משתמשים בסקריפט שמפעיל מפה באמצעות מפתח ה-API. בדוגמה הבאה מוסבר איך לעשות זאת מ-HTML:
מקור כתובת ה-URL: קריאה ל-Google Maps API כדי לבקש מפה באמצעות מפתח ה-API.
הפרמטר
callback
: הפעלת הפונקציהinitMap
אחרי שה-API מחזיר את הקריאה.הפרמטר
libraries
: טוען את ספריית המעקב של Fleet.מאפיין
defer
: מאפשר לדפדפן להמשיך את העיבוד של שאר הדף בזמן טעינת ה-API.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
לספק את מיקום הרכב ואת תצוגת המפה
כדי להתחיל לעקוב אחרי רכב, צריך ליצור מופע של ספק מיקום הרכב ולהפעיל תצוגת מפה עם מזהה הרכב, כפי שמתואר בקטעים הבאים.
יצירת מכונה של ספק מיקום הרכב
ספריית המעקב אחרי צי כלי רכב ב-JavaScript כוללת ספק מיקום ל-Fleet Engine API. משתמשים במזהה הפרויקט ובהפניה למאגר הטוקנים כדי ליצור מופע, כפי שמתואר בדוגמאות הבאות.
נסיעות על פי דרישה
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',
});
משימות מתוזמנות
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',
});
איך מאתחלים את תצוגת המפה
אחרי טעינת ספריית JavaScript לשיתוף המסלול, מפעילים את תצוגת המפה ומוסיפים אותה לדף ה-HTML. הדף צריך לכלול אלמנט <div> שמכיל את תצוגת המפה. רכיב <div> נקרא map_canvas בדוגמאות הבאות.=
נסיעות על פי דרישה
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);
משימות מתוזמנות
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);
האזנה לאירועים וטיפול בשגיאות
אחרי שמתחילים לעקוב אחרי רכב, רוצים לעדכן את ההתקדמות שלו במפה ולטפל בשגיאות בזמן שהרכב נוסע במסלול.
האזנה לאירועים של זיהוי כלי רכב
כדי לעקוב אחרי ההתקדמות של רכב בנסיעות על פי דרישה או במשימות מתוזמנות, צריך להאזין לאירועי שינוי.
מאחזרים מטא-נתונים מהאובייקט vehicle
או deliveryVehicle
באמצעות ספק המיקום. המטא-מידע כולל את זמן ההגעה המשוער ואת המרחק שנותר עד לאיסוף או להחזרה הבאים של הרכב. שינויים במטא-נתונים מפעילים אירוע עדכון בספק המיקום.
בדוגמה הבאה מוסבר איך להאזין לאירועי השינוי האלה.
נסיעות על פי דרישה
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);
}
});
משימות מתוזמנות
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);
}
});
טיפול בשגיאות
אחרי טעינת ספריית JavaScript לשיתוף המסלול, מפעילים את תצוגת המפה ומוסיפים אותה לדף ה-HTML. הדף צריך לכלול אלמנט <div> שמכיל את תצוגת המפה. רכיב <div> נקרא map_canvas בדוגמאות הבאות.=
נסיעות על פי דרישה
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);
משימות מתוזמנות
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);
הפסקת המעקב אחרי רכב
כדי להפסיק את המעקב אחרי רכב, צריך להסיר אותו מספק המיקום ולהסיר את ספק המיקום מתצוגת המפה, כפי שמתואר בקטעים הבאים. הדוגמאות האלה רלוונטיות גם להטמעה של נסיעות על פי דרישה וגם להטמעה של משימות מתוזמנות.
הסרת רכב מספק המיקומים
כדי למנוע מספק המיקום לעקוב אחרי רכב, צריך להסיר את מזהה רכב המסירה מספק המיקום.
נסיעות על פי דרישה
JavaScript
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
משימות מתוזמנות
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
הסרת ספק המיקום מתצוגת המפה
בדוגמה הבאה מוסבר איך להסיר ספק מיקום מתצוגת המפה.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);