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

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

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

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

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

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

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

  3. הוספת טיפול בלחיצות לסימנים: דוגמאות מפורטות מופיעות בקטע הוספת טיפול בלחיצות.

  4. סינון של הסמנים שגלויים: סינון הסמנים שמופיעים באמצעות יכולות הסינון הזמינות בספק המיקום של JavaScript. לדוגמה:

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

אפשרויות להתאמה אישית של סמנים

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

פרמטרים של התאמה אישית של נסיעות על פי דרישה

פרמטרים של התאמה אישית של משימות מתוזמנות

סמני סגנון לפי סוג

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

דוגמה לנסיעות על פי דרישה

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

דוגמה למשימות מתוזמנות

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

סמני סגנון שמבוססים על נתונים

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

דוגמה לנסיעות על פי דרישה

JavaScript

vehicleMarkerCustomization =
  (params) => {
    const remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

דוגמה למשימות מתוזמנות

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

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

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

דוגמה למשימות מתוזמנות

JavaScript

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

TypeScript

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

סינון של הסמנים שרואים

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

דוגמה לנסיעות על פי דרישה

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

דוגמה למשימות מתוזמנות

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

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