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

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

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

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

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

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

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

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

  3. הוספת טיפול בקליקים לסמנים: לדוגמה, ראו הוספת טיפול בקליקים.

אפשרויות להתאמה אישית של הסמן

בשתי האפשרויות נעשה שימוש בפרמטרים הבאים להתאמה אישית ב-Google Maps JavaScript API בקטע 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.
      });
    }
  };

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