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

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

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

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

  • הפשוט ביותר: מציינים אובייקט MarkerOptions שיחול על כל הסמנים מאותו סוג. לאחר מכן, ה-SDK של הצרכן מחיל את הסגנון בשני מצבים: לפני הוספת הסמנים למפה, וכאשר הנתונים ששימשו לסמנים השתנו.
  • מתקדם יותר: מציינים פונקציית התאמה אישית. פונקציות ההתאמה האישית מאפשרות לעצב את הסמנים על סמך נתונים, וגם להוסיף להם אינטראקטיביות, כמו טיפול בלחיצות. באופן ספציפי, ה-Consumer SDK מעביר נתונים לפונקציית ההתאמה האישית לגבי סוג האובייקט שאותו מייצג הסמן: רכב או יעד. כך אפשר לשנות את סגנון הסמן בהתאם למצב הנוכחי של רכיב הסמן עצמו, למשל מספר תחנות העצירה המתוכננות שנותרו עד ליעד. אפשר גם לצרף נתונים ממקורות מחוץ ל-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();

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