מעקב אחר רכב

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

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

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

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

כדי להציג את פעולות הצי שלכם במפה בדף האינטרנט, צריך להשתמש בסקריפט שקורא למפה באמצעות מפתח ה-API שלכם. בדוגמה הבאה אפשר לראות איך עושים את זה מ-HTML:

  • ‫URL source: קריאה ל-Google Maps API כדי לבקש מפה באמצעות מפתח ה-API.

  • הפרמטר callback: מפעיל את הפונקציה initMap אחרי שה-API מחזיר את הקריאה.

  • הפרמטר libraries: טוען את ספריית המעקב אחר צי הרכב.

  • ‫defer attribute: מאפשר לדפדפן להמשיך לעבד את שאר הדף בזמן שה-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);

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