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

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

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