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

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

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

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

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

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

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

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

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

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter
   הערה: אפשר גם לסנן את הנראות של הסמן באמצעות פונקציות להתאמה אישית, אבל זה עלול להשפיע על הביצועים. אם אתם חייבים לעשות את זה, תוכלו להתקשר למספר setVisible(false) שמופיע על הסימון. דוגמאות אפשר לראות במאמר בנושא סינון הסמנים שמוצגים.

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

אפשרויות להתאמה אישית של ההדגשה

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

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

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

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

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

הגדרת סגנון לסמנים לפי סוג

בדוגמה הבאה מוצג אובייקט 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.

אם אתם צריכים להשתמש ב-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);
    }
  };

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

• עיצוב מפה
• התאמה אישית של קווים מצולעים