سفارشی کردن چند خطوط مسیر

این سند نحوه سفارشی کردن چند خطوط مسیر را برای نقشه ای که در برنامه ردیابی سفر مبتنی بر وب خود برای کاربران مصرف کننده استفاده می کنید را پوشش می دهد.

با Consumer SDK، می‌توانید دید چند خط مسیر را کنترل کنید یا چند خط مسیر را برای مسیر سفر روی نقشه سبک کنید. SDK یک شی google.maps.Polyline برای هر جفت مختصات در مسیر فعال یا باقیمانده سفر ایجاد می کند. سپس کتابخانه این سفارشی سازی ها را در دو موقعیت اعمال می کند:

• قبل از اضافه کردن اشیا به نقشه
• هنگامی که داده های مورد استفاده برای اشیاء تغییر کرده است

چند خط مسیر سبک

مشابه نحوه استایل دادن به نشانگرها، چند خط مسیر را با استفاده از پارامترهای سفارشی‌سازی استایل می‌دهید. از آنجا، استایل را با استفاده از یکی از رویکردهای زیر پیکربندی می‌کنید:

• ساده‌ترین : از PolylineOptions برای اعمال بر روی تمام اشیاء Polyline منطبق هنگام ایجاد یا به‌روزرسانی استفاده کنید.
• پیشرفته : یک تابع سفارشی سازی را مشخص کنید. توابع سفارشی‌سازی امکان استایل‌سازی فردی اشیاء را بر اساس داده‌های ارسال شده توسط Fleet Engine فراهم می‌کنند. این تابع می تواند استایل هر شی را بر اساس وضعیت فعلی سفر تغییر دهد. به عنوان مثال، شیء Polyline را با سایه عمیق تر رنگ آمیزی کنید، یا زمانی که وسیله نقلیه کندتر حرکت می کند، آن را ضخیم تر کنید. حتی می‌توانید از منابع خارج از Fleet Engine به آن بپیوندید و شی Polyline را بر اساس آن اطلاعات استایل دهید.

پارامترهای سفارشی سازی

هنگام استایل کردن چند خطوط مسیر، از پارامترهای ارائه شده در FleetEngineTripLocationProviderOptions استفاده می کنید. این پارامترها حالت های مسیر متفاوتی را در سفر وسیله نقلیه به شرح زیر ارائه می کنند:

• مسیرهای قبلاً طی شده : از takenPolylineCustomization استفاده کنید.
• مسیر فعال : از activePolylineCustomization استفاده کنید.
• مسیری که هنوز طی نشده است : remainingPolylineCustomization استفاده کنید.

از PolylineOptions استفاده کنید

مثال زیر نحوه پیکربندی یک ظاهر طراحی شده برای یک شی Polyline را با PolylineOptions نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از سفارشی‌سازی‌های چند خطی که قبلاً ذکر شد، استایل هر شی Polyline را سفارشی کنید.

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

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

از توابع سفارشی سازی برای استایل کردن چند خط مسیر استفاده کنید

مثال زیر نحوه پیکربندی استایل را برای چند خط مسیر فعال نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از پارامترهای سفارشی سازی مسیر چند خطی که قبلا ذکر شد، استایل هر شی Polyline را سفارشی کنید.

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

// 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 آن را تنظیم کنید:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};