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

בעזרת ספריית 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);
    }
  };

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