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

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

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