דף זה תורגם על ידי 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;
    }
  });

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

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

אחרי טעינת ספריית 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);

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

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

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

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

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