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

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

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

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

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

התחלת המעקב אחרי כלל המכשירים בארגון

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

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

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

כדי ליצור מופע של ה-API:

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

איך מאתחלים את תצוגת המפה

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

אחרי שטוענים את ספריית Journey Sharing ב-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);

האזנה לאירועים וטיפול בשגיאות

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

האזנה לאירועי שינוי

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

פרטים נוספים זמינים במאמרים הבאים:

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

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

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);

מעקב אחרי רכב מסירה בזמן הצגת צי כלי רכב

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

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);
    }
  };

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

התאמת סגנון למפה