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

במסמך הזה מוסבר איך להתאים אישית את המראה והסגנון של מסלולים של כלי רכב במעקב במפה. המסלולים מוצגים במפה כקווים פוליגונים. הספרייה יוצרת אובייקט google.maps.Polyline לכל זוג קואורדינטות בנתיב הפעיל או שנותר של הרכב. אפשר להגדיר סגנון לאובייקטים מסוג Polyline על ידי ציון התאמות אישיות של קווים פוליגונליים, שהספרייה מחילה בשני מצבים:

• לפני שמוסיפים את הפריטים למפה
• כשהנתונים המשמשים את האובייקטים השתנו

עיצוב קווים פוליגונים

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

1. עיצוב קווים פוליגונליים של מסלולים לפי סוג: משתמשים ב-PolylineOptions כדי להחיל את העיצוב על כל אובייקטי ה-Polyline שתואמים לקריאה כשיוצרים אותם או מעדכנים אותם. דוגמה לכך מופיעה במאמר עיצוב קווים פוליגונים לפי סוג.

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

   • נתונים ממעקב אחרי צי כלי רכב: מעקב אחרי צי כלי רכב מעביר נתוני קווים פוליגונים לפונקציית ההתאמה האישית, כולל נתונים על המצב הנוכחי של הרכב. אפשר לעצב קווים פוליגונים על סמך הנתונים האלה, כולל צביעת האובייקט Polyline בגוון עמוק יותר או הגדלת עובי הקו כאשר הרכב נע לאט יותר.

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

   דוגמה לכך מופיעה במאמר עיצוב קווים פוליגונליים על סמך נתונים.

3. שליטה בחשיפה של קווים פוליגונליים של מסלולים: אפשר להסתיר או להציג קווים פוליגונליים באמצעות המאפיין visible. פרטים נוספים זמינים בקטע שליטה בחשיפה של קווים פוליגונליים במדריך הזה.

4. הצגת מידע נוסף על רכב או על סמן מיקום: אפשר להציג מידע נוסף באמצעות המאפיין infowindow. פרטים נוספים זמינים בקטע הצגת מידע נוסף על רכב או על סמן מיקום במדריך הזה.

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

אפשרויות ההתאמה האישית הבאות זמינות גם ב-FleetEngineVehicleLocationProviderOptions וגם ב-FleetEngineDeliveryVehicleLocationProviderOptions. אפשר להגדיר התאמות אישיות למצבים שונים של נתיב במסלול של הרכב:

• נתיב שכבר נסעתם בו: משתמשים ב-takenPolylineCustomization – נסיעות על פי דרישה, משימות מתוזמנות.

• נתיב נסיעה פעיל: משתמשים ב-activePolylineCustomization – נסיעות על פי דרישה, הפניה למשימות מתוזמנות.

• נתיב שעדיין לא נסע בו: משתמשים ב-remainingPolylineCustomization – נסיעות על פי דרישה, משימות מתוזמנות.

עיצוב קווים פולינימיים של מסלולים לפי סוג

כדי לשנות את הסגנון של קווים פוליגונליים של מסלולים לפי סוג, משנים את הסגנון של אובייקטים מסוג Polyline באמצעות PolylineOptions.

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

דוגמה לנסיעות על פי דרישה או למשימות מתוזמנות

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

עיצוב קווים פוליגונים של מסלולים באמצעות נתונים

כדי לשנות את הסגנון של קווים פוליגונליים של מסלולים באמצעות נתונים, משנים את הסגנון של אובייקטים מסוג Polyline באמצעות פונקציות התאמה אישית.

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

דוגמה לנסיעות על פי דרישה

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

דוגמה למשימות מתוזמנות

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

דוגמה לעיצוב שמתחשב בתנועה (נסיעות על פי דרישה בלבד)

‏Fleet Engine מחזיר נתוני מהירות תנועה לגבי הנתיבים הפעילים והנותרים של הרכב במעקב. אפשר להשתמש במידע הזה כדי לעצב אובייקטים מסוג Polyline בהתאם למהירויות התנועה שלהם:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

שליטה בחשיפה של קווים פוליגונים

כברירת מחדל, כל האובייקטים מסוג Polyline גלויים. כדי להפוך אובייקט Polyline לא בלתי נראה, מגדירים את המאפיין visible שלו לערך false.

דוגמה לנסיעות על פי דרישה או למשימות מתוזמנות

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

הצגת חלון מידע על רכב או על סמן מיקום

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

בדוגמה הבאה מוסבר איך ליצור InfoWindow ולצרף אותו לסמן של רכב.

דוגמה לנסיעות על פי דרישה

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

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

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 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();

דוגמה למשימות מתוזמנות

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

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

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