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

בחירת פלטפורמה: Android iOS JavaScript

התאמה אישית של המראה והתחושה של הסמנים שנוספו למפה. יש שתי דרכים להתאים אישית את המראה של הסמנים שנוספו למפה:

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

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

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

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

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

  3. הוספת טיפול בלחיצות לסימנים: דוגמאות מפורטות זמינות במאמר הוספת טיפול בלחיצות.

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

בשתי האפשרויות נעשה שימוש בפרמטרים הבאים של התאמה אישית בממשק API של JavaScript במפות Google בקטע FleetEngineTripLocationProviderOptions:

שינוי הסגנון של הסמנים באמצעות MarkerOptions

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

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

שינוי הסגנון של סמנים באמצעות פונקציות התאמה אישית

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

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

הוספת טיפול בקליק לסימנים

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

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

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