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

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

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