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

בחירת פלטפורמה: Android iOS JavaScript

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

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

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

שינוי הסגנון של קווים מרובי נקודות של מסלולים

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

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

פרמטרים של התאמה אישית

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

שימוש ב-PolylineOptions

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

JavaScript

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

TypeScript

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

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

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

JavaScript

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[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 route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[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'});
      }
    }
  };

שליטה בהרשאות הגישה של קו מרובה של מסלול

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

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};