מעקב אחר הצי שלך באמצעות ספריית המעקב של המאגר של JavaScript

הספרייה למעקב אחר ציים של JavaScript מאפשרת להציג באופן חזותי את המיקומים של כלי הרכב בצים שלהם כמעט בזמן אמת. הספרייה משתמשת ב-Deliveries API כדי לאפשר תצוגה חזותית של רכבי משלוח וגם משימות. לייק ספריית המעקב אחר משלוחים ב-JavaScript, הוא מכיל רכיב מפה של JavaScript שמחליף את 'טיפ' לישות google.maps.Map רגילה ורכיבי נתונים לקישור עם Fleet Engine.

רכיבים

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

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

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

ספקי מיקום

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

ספק מיקום הרכב למשלוח

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

ספק המיקום של צי המשלוחים

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

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

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

רכבי משלוח

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

סמני מיקום של משימות

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

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

תחילת העבודה עם ספריית המעקב של Fleet ב-JavaScript

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

יצירת מזהה משימה והצהרה על מזהה הרכב למשלוח

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

כדי ליצור את המטען הייעודי (payload) של JWT, צריך להוסיף הצהרה נוספת בקטע ההרשאה עם המפתחות taskid ו-deliveryvehicleid, ומגדירים את הערך של כל מקש *. יש ליצור את האסימון באמצעות Fleet Engine תפקיד IAM של סופר-משתמש ב-Cloud. חשוב לזכור שהפעולה הזו נותנת גישה רחבה כדי ליצור, לקרוא ולשנות ישויות של Fleet Engine, וצריך לשתף אותן רק עם משתמשים מהימנים.

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

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "[e-mail]",
  "sub": "[e-mail]",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "taskid": "*",
     "deliveryvehicleid": "*",
   }
}

יצירת שליפת אסימון אימות

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

המאחזר חייב להחזיר מבנה נתונים שכולל שני שדות, עטוף בהבטחה:

• מחרוזת token.
• מספר expiresInSeconds. התוקף של אסימון יפוג בתוך פרק הזמן הזה לאחר אחזור.

ספריית המעקב של Fleet JavaScript מבקשת אסימון דרך האימות מאחזר האסימונים כשמתקיים אחד מהתנאים הבאים:

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

אחרת, הספרייה תשתמש באסימון החוקי הקודם, שעדיין בתוקף, לא לקרוא ל-Fetcher.

הדוגמה הבאה מציגה איך ליצור כלי לשליפה של אסימון אימות:

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

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

• נקודת הקצה חייבת להחזיר מועד תפוגה עבור האסימון, בדוגמה שלמעלה, הוא מוגדר כ-data.ExpiresInSeconds.
• מאחזר אסימון האימות חייב להעביר את זמן התפוגה (בשניות, זמן השליפה) לספרייה, כפי שמוצג בדוגמה.
• ה-server_TOKEN_URL תלוי בהטמעה של הקצה העורפי שלך. אלה כתובות ה-URL של הקצה העורפי של האפליקציה לדוגמה:
  • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
  • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
  • https://SERVER_URL/token/fleet_reader

טעינת מפה מ-HTML

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

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

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

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

יצירת אובייקטים של ספק מיקום של רכב למשלוחים

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

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify 
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

אתחול תצוגת המפה

אחרי שטוענים את ספריית Journey Sharing ב-JavaScript, מאתחלים את תצוגת המפה ומוסיפים אותה לדף ה-HTML. הדף צריך לכלול רכיב <div> ששומר את תצוגת המפה. הרכיב <div> נקרא map_canvas בדוגמה שלמטה.

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// 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 wish.
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],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// 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 wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

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

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

JavaScript

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

TypeScript

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

האזנה לשגיאות

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

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

הפסקת מעקב

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

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

הצגת צי משלוחים

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

יצירת אובייקט של ספק מיקום של צי משלוחים

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

JavaScript

locationProvider =
    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"',
        });

TypeScript

locationProvider =
    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"',
        });

deliveryVehicleFilter מציין שאילתה שמשמשת לסינון כלי רכב שמוצגים ב- את המפה. המסנן הזה מועבר ישירות אל Fleet Engine. צפייה ListDeliveryVehiclesRequest.filter כדי לראות את הפורמטים הנתמכים.

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

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

הגדרה של הגבלת מיקום באמצעות אזור התצוגה של המפה

אפשר להגדיר את הגבולות של 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;
    }
  });

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

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

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

האזנה לשגיאות

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

הפסקת מעקב

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

התאמה אישית של העיצוב והסגנון של המפה הבסיסית

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

שימוש בעיצוב מפות מבוסס-ענן

עיצוב מפות מבוסס-ענן מאפשר ליצור ולערוך סגנונות מפה לכל אחת מהאפליקציות שלך שמשתמשות במפות Google ממסוף Google Cloud בלי שתצטרכו לבצע שינויים בקוד. סגנונות המפות נשמרים כמזהי מפות בפרויקט Cloud. שפת תרגום להחיל סגנון על מפת המעקב של Fleet ב-JavaScript, לציין mapId כשיוצרים את JourneySharingMapView. אי אפשר לשנות את השדה mapId או התווסף אחרי המופע של JourneySharingMapView. הבאים דוגמה שממחישה איך להפעיל סגנון מפה שנוצר בעבר באמצעות מזהה המפה.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

שימוש בעיצוב מפה מבוסס-קוד

דרך נוספת להתאמה אישית של עיצוב המפה היא mapOptions כאשר יוצרים את JourneySharingMapView.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

שימוש בהתאמה אישית של סמנים

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

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

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

בנוסף, ניתן להשתמש בפונקציות התאמה אישית כדי לסנן את חשיפת הסמנים. לשם כך, התקשרו setVisible(false) בסמן.

עם זאת, מסיבות שקשורות לביצועים, מומלץ לסנן באמצעות סינון בספק המיקום, למשל FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter עם זאת, כשאתם זקוקים לפונקציית סינון נוספת, תוכלו להחיל סינון באמצעות פונקציית ההתאמה האישית.

הספרייה Fleet Tracking מספקת את הפרמטרים הבאים להתאמה אישית:

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

שינוי הסגנון של הסמנים באמצעות MarkerOptions

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

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

שינוי העיצוב של הסמנים באמצעות פונקציות של התאמה אישית

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

הוספת טיפול בקליקים לסמנים

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

סינון של הסמנים הגלויים

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

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

בעזרת ספריית המעקב של Fleet ב-JavaScript, אפשר גם להתאים אישית את המראה התחושה של המסלול של כלי הרכב במפה. הספרייה יוצרת google.maps.Polyline לכל צמד של קואורדינטה במצב פעיל או שנותר ברכב path. ניתן לעצב את האובייקטים Polyline על ידי ציון התאמות אישיות של קווים פוליגוניים. לאחר מכן מחילה את ההתאמות האישיות האלה בשני מצבים: לפני ההוספה של האובייקטים במפה, וכשהנתונים שבהם נעשה שימוש באובייקטים השתנו.

בדומה להתאמה אישית של סמנים, ניתן לציין קבוצה של PolylineOptions יחול על כל האובייקטים Polyline התואמים כשהם נוצרו או עודכנו.

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

ניתן לציין את ההתאמות האישיות באמצעות הפרמטרים שסופקו ב FleetEngineDeliveryVehicleLocationProviderOptions אפשר להגדיר התאמה אישית למצבי נתיב שונים ברכב מסע – כבר נסעתם, נסעתי באופן פעיל או טרם נסעתי. הם:

• takenPolylineCustomization, לנתיב שכבר עבר בו;
• activePolylineCustomization, לנתיב נסיעה פעיל;
• remainingPolylineCustomization, לנתיב שעוד לא עבר.

שינוי העיצוב של Polyline אובייקטים באמצעות PolylineOptions

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

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

שינוי העיצוב של Polyline אובייקטים באמצעות פונקציות של התאמה אישית

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

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

שליטה בחשיפה של Polyline אובייקטים

כברירת מחדל, כל האובייקטים של Polyline גלויים. כדי ליצור אובייקט Polyline מוסתר, הגדרת visible נכס:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

הצגת InfoWindow לסימון רכב או מיקום

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

בדוגמה הבאה אפשר לראות איך ליצור InfoWindow ולצרף אותו. לסמן של הרכב.

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.   
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.   
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

השבתת התאמה אוטומטית

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

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

החלפה של מפה קיימת

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

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

<!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 Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // 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 Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * 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>

כדי להוסיף את הספרייה 'שיתוף מסלול' ב-JavaScript, שכוללת את 'מעקב אחר ציים':

1. צריך להוסיף קוד למפעל של אסימון האימות.
2. מפעילים ספק מיקום בפונקציה initMap().
3. אפשר לאתחל את תצוגת המפה בפונקציה initMap(). התצוגה מכילה את המפה.
4. מעבירים את ההתאמה האישית לפונקציית הקריאה החוזרת של תצוגת המפה.
5. מוסיפים את ספריית המיקומים לטעינת ה-API.

בדוגמה הבאה מוצגים השינויים שצריך לבצע:

<!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>
let locationProvider;

// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
  // as appropriate.
  locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

mapView.addListener('ready', () => {
  locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, initially centered at Mountain View, CA.
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, now positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };
}
    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

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