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

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

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