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

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

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

• סמנים של כלי רכב למשלוח: משתמשים ב-deliveryVehicleMarkerCustomization
• סמני יעד: משתמשים ב-destinationMarkerCustomization

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

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

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

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

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

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

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

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

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

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

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

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

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

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

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

// 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();

// 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();

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

• התאמה אישית של קווים פוליגונליים