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

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

בעזרת JavaScript Consumer SDK, אפשר להתאים אישית את המראה והתחושה של שני סוגים של סמנים שנוספו למפה:

יש שתי דרכים לעשות את זה:

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

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