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

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

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

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

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

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