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

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

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