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

באמצעות ספריית 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);
    }
  };

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