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

מעקב אחר משלוח

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

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

הגדרת מפה

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

טעינת מפה חדשה באמצעות JavaScript API של מפות Google

כדי ליצור מפה חדשה, צריך לטעון את Google Maps JavaScript API באפליקציית האינטרנט. בדוגמה הבאה מוסבר איך לטעון את Google Maps JavaScript API, להפעיל את ה-SDK ולהפעיל את בדיקת האיפוס.

הפרמטר callback מריץ את הפונקציה initMap אחרי שה-API נטען.
המאפיין defer מאפשר לדפדפן להמשיך לעבד את שאר בזמן שה-API נטען.

שימוש בפונקציה initMap כדי ליצור את ה-SDK לצרכן. לדוגמה:

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

טעינה של מפה קיימת

אפשר גם לטעון מפה קיימת שנוצרה על ידי Google Maps JavaScript API, כמו כתובת שכבר נמצאת בשימוש.

לדוגמה, נניח שיש לך דף אינטרנט עם פרמטר google.maps.Map רגיל הישות שבה מוצג סמן כפי שמוגדר בקוד ה-HTML הבא. הזה מציג את המפה באמצעות אותה פונקציית initMap בקריאה החוזרת בסוף:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
           /* Set the size of the div element that contains the map */
          #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>
        <script>
        // Initialize and add the map
        function initMap() {
          // The location of Pier 39 in San Francisco
          var pier39 = {lat: 37.809326, lng: -122.409981};
          // The map, initially centered at Mountain View, CA.
          var map = new google.maps.Map(document.getElementById('map'));
          map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

          // The marker, now positioned at Pier 39
          var marker = new google.maps.Marker({position: pier39, map: map});
        }
        </script>
        <!-- Load the API from the specified URL.
           * The defer attribute allows the browser to render the page while the API loads.
           * The key parameter contains your own API key.
           * The callback parameter executes the initMap() function.
        -->
        <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
      </body>
    </html>

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

משתמשים בספק של מיקום המשלוח, יחד עם אסימון ההרשאה ב-Fetcher שהגדרתם קודם, כדי להתחיל לקבל נתונים מ-Fleet Engine.

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

JavaScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

TypeScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

הצגת המסלול המשותף

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

טיפים:

מוודאים שהדף מכיל רכיב <div> שכולל את תצוגת המפה. בדוגמה הבאה, השם של הרכיב <div> הוא map_canvas.
חשוב לשים לב לכללי ברירת המחדל של הרשאות הגישה, Fleet Engine חל על מסעות. אפשר גם להגדיר כללי הרשאות גישה לרכב פעיל משימות של משלוח ועצירה מתוזמנת. אפשר לקרוא מידע נוסף בקטע התאמה אישית של הרשאות הגישה למשימה מדריך להגדרת משימות.

הדוגמאות האלה מראות איך להפעיל תצוגת מפה.

JavaScript

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
    // Any undefined styling options use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts as soon as this is set.
  locationProvider.trackingId = 'your-tracking-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 wish.
  mapView.map.setCenter({lat: 37.2, lng: -121.9});
  mapView.map.setZoom(14);
}

TypeScript

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
   // Any undefined styling options will use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts as soon as this is set.
  locationProvider.trackingId = 'your-tracking-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 wish.
  mapView.map.setCenter({lat: 37.2, lng: -121.9});
  mapView.map.setZoom(14);
}

עדכון התקדמות המשלוח

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

זמן הגעה משוער
מספר העצירות שנותרו
המרחק שנותר לפני איסוף או משלוח

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

JavaScript

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

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  // e.taskTrackingInfo contains data that may be useful
  // to the rest of the UI.
  console.log(e.taskTrackingInfo.remainingStopCount);
});

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

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

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

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

הפסקת המעקב אחרי משלוח

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

הסרת המזהה לצורכי מעקב

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

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

טיפול בשגיאות במעקב אחרי המשלוח

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

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

הערה: חשוב להקפיד לכלול קריאות לספרייה ב-try...catch בלוקים כדי לטפל בשגיאות בלתי צפויות.

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

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