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

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

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

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

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

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

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

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

JavaScriptTypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

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

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

JavaScriptTypeScript

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

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

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

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

JavaScriptTypeScript

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 ומצורף לסמן רכב:

JavaScriptTypeScript

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

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

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