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

בחירת פלטפורמה: 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.
      });
    }
  };

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