מעקב אחר רכב

בקטע הזה מוסבר איך להשתמש בספריית JavaScript למעקב אחרי צי כלי רכב כדי לעקוב אחרי רכב לצורך נסיעות על פי דרישה או משימות מתוזמנות.

כדי לעקוב אחרי רכב, מבצעים את הפעולות הבאות:

  1. טעינה של הספרייה והפעלה של תצוגת המפה
  2. איך מספקים את המיקום של הרכב ואת תצוגת המפה
  3. האזנה לאירועים וטיפול בשגיאות
  4. הפסקת המעקב

טעינת הספרייה והפעלת תצוגת המפה

כדי להציג את פעולות הצי במפה בדף האינטרנט, משתמשים בסקריפט שמפעיל מפה באמצעות מפתח ה-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);

המאמרים הבאים