דף זה תורגם על ידי Cloud Translation API.

הצגת כלל המכשירים בארגון

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

מסמך זה מפרט את הדברים הבאים שניתן לעשות בעת הצגת כלל המכשירים בארגון:

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

התחלת המעקב אחרי הצי

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

יצירת מכונה של ספק מיקום של צי

ספריית JavaScript למעקב אחרי צי כלי רכב כוללת ספק מיקום שאוסף מידע על כמה כלי רכב מ-Fleet Engine.

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

משתמשים במזהה הפרויקט וגם בהפניה למאגר האסימונים.
שימוש בשאילתת סינון של כלי רכב שאילתת הסינון של כלי הרכב קובעת אילו כלי רכב יוצגו במפה. המסנן מועבר אל Fleet Engine.
- לשירותים על פי דרישה, משתמשים ב-vehicleFilter ומעיינים ב-ListVehiclesRequest.filter
- כדי לראות משימות מתוזמנות, צריך להשתמש במספר deliveryVehicleFilter ולבדוק ListDeliveryVehiclesRequest.filter
מגדירים גבולות להצגת רכב. שימוש ב-locationRestriction כדי להגביל את האזור שבו יוצגו כלי רכב במפה. המיקום הספק לא יהיה פעיל עד שתגדירו זאת. אפשר להגדיר את גבולות המיקום ב-constructor או אחרי ה-constructor.
מאתחלים את תצוגת המפה.

הדוגמאות הבאות מראות איך ליצור ספק מיקום של כלל המכשירים בארגון גם בתרחישים של משימות לפי דרישה וגם בתרחישים של משימות מתוזמנות. הדוגמאות האלה גם מראות איך משתמשים locationRestriction ב-constructor כדי להפוך את ספק המיקום פעיל.

נסיעות על פי דרישה

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

משימות מתוזמנות

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

כדי להגדיר את locationRestriction אחרי ה-constructor, מוסיפים את locationProvider.locationRestriction בהמשך הקוד, כפי שמוצג בדוגמה הבאה ל-JavaScript.

   // You can choose to not set locationRestriction in the constructor.
   // In this case, the location provider *DOES NOT START* after this line, because
   // no locationRestriction is set.
   locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
   ... // not setting locationRestriction here
   });

   // You can then set the locationRestriction *after* the constructor.
   // After this line, the location provider is active.
   locationProvider.locationRestriction = {
     north: 1,
     east: 2,
     south: 0,
     west: 1,
   };

הגדרה של הגבלת מיקום באמצעות אזור התצוגה של המפה

אפשר גם להגדיר גבולות של locationRestriction בהתאם לאזור הנוכחי גלוי בתצוגת המפה.

נסיעות על פי דרישה

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

משימות מתוזמנות

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

אתחול תצוגת המפה

לאחר שיוצרים את ספק המיקום, מאתחלים את תצוגת המפה באותו שבה עושים את זה כשעוקבים אחרי רכב אחד.

אחרי שטוענים את ספריית התהליך של 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.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  for (vehicle of e.vehicles) {
    console.log(vehicle.navigationStatus);
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

משימות מתוזמנות

JavaScript

locationProvider.addListener('update', e => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

האזנה לשגיאות

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

הדוגמה הבאה מראה איך להאזין ל כדי לטפל בשגיאות.

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

הפסקת המעקב אחרי הצי

כדי להפסיק את המעקב אחרי הצי, מגדירים את הגבולות של ספק המיקום כ-null ואז מסירים את ספק המיקום מתצוגת המפה, כפי שמתואר בקטעים הבאים.

הגדרת גבולות של ספק המיקום כ-null

כדי למנוע מספק המיקום לעקוב אחרי כלל המכשירים בארגון, צריך להגדיר את הגבולות של ספק המיקום לערך null.

נסיעות על פי דרישה

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

משימות מתוזמנות

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

הסרת ספק המיקום מתצוגת המפה

בדוגמה הבאה ניתן לראות איך להסיר ספק מיקום מתצוגת המפה.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

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

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

JavaScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

TypeScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

שימוש בהתאמה אישית של סמנים כדי לעקוב אחרי רכב שמספק משלוחים

כדי לאפשר לספק המיקום של כלי הרכב להעביר נתונים על כלי רכב של חברת משלוחים כשמקליקים על סמן הצי של כלי הרכב, צריך לפעול לפי השלבים הבאים:

מתאימים אישית את הסמן ומוסיפים פעולת קליק.
הסתר את הסמן כדי למנוע סמנים כפולים.

הערה: ספק המיקום של כלל המשלוחים מעבד קבוצת סמנים, אחד עבור כל רכב שבמעקב. אם רוצים להציג פרטים של רכב אחד כשהמשתמש לוחץ עליו, יוצרים מופע של ספק מיקום של כלי רכב למשלוח ומגדירים את מזהה הרכב כזה שלחץ עליו המשתמש, כפי שמתואר בדוגמה הבאה. אבל כשעושים זאת, ספק המיקום גם מציג סמן לרכב הזה (כפי שהוא מתוכנן לביצוע). אז מסתירים אחד מהם כדי שלא יהיו שני סמנים לאותה תוצאה את הרכב.

בסעיפים הבאים מפורטות דוגמאות לשלבים האלה.

התאמה אישית של סמן והוספת פעולת קליק

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

הסתרת הסמן כדי למנוע כפילויות

מסתירים את הסמן מספק המיקום של כלי המסירה כדי למנוע את ההצגה של שני סמנים לאותו רכב:

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

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

עיצוב מפה