מעקב אחר רכב

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

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

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

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

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

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

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

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

• המאפיין 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);

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

• איך רואים את צי המשלוחים
• עיצוב מפה