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

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

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