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

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

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

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

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

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

יצירת מופע של ספק מיקום של צי

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

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

1. השתמשו במזהה הפרויקט וגם בהפניה לאחזור האסימונים.

2. שימוש בשאילתת סינון כלי רכב: שאילתת סינון כלי הרכב קובעת אילו כלי רכב יוצגו במפה. המסנן מועבר אל Fleet Engine.

   • לשירותים על פי דרישה, צריך להשתמש ב-vehicleFilter ולעיין ב-ListVehiclesRequest.filter
   • למשימות מתוזמנות, משתמשים ב-deliveryVehicleFilter ובודקים את ListDeliveryVehiclesRequest.filter

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

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

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

הערה: הדוגמה הזו מיועדת למשימות מתוזמנות, אבל כדי לעשות את זה לנסיעות על פי דרישה, פשוט משתמשים ב-google.maps.journeySharing.FleetEngineFleetLocationProvider במקום זאת.

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

מעקב אחרי רכב משלוחים בזמן צפייה בצי רכבי משלוחים

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

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

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

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

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

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

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

בקטעים הבאים יש דוגמאות לשלבים האלה.

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

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

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

• עיצוב מפה