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

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

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