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

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

עיצוב מפה