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

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

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

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