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

בחירת פלטפורמה: 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};