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

במסמך הזה מוסבר איך להתאים אישית את סמלי הרכב והמיקום במפה שבה אתם משתמשים באפליקציה למעקב אחר משלוחים באינטרנט לצרכנים.

באמצעות ה-SDK של JavaScript לצרכן, אפשר להתאים אישית את המראה של שני סוגים של סמנים שנוספו למפה:

אפשר לעשות זאת באחת משתי דרכים:

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

דוגמה פשוטה: שימוש ב-MarkerOptions

בדוגמה הבאה מוסבר איך להגדיר את העיצוב של סמן הרכב באמצעות אובייקט MarkerOptions. בדוגמה הזו, ערכי השקיפות של הסמן מוגדרים ל-50%.

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

דוגמה מתקדמת: שימוש בפונקציית התאמה אישית

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

הוספת טיפול בקליק לסימנים

אפשר להוסיף טיפול בלחיצה לכל סמן, כמו בדוגמה הבאה לסמן של רכב.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

הצגת מידע נוסף על סמנים

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

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

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