سفارشی‌سازی چندخطی‌های مسیر

این سند نحوه سفارشی‌سازی ظاهر و احساس مسیرهای وسایل نقلیه ردیابی‌شده روی نقشه را پوشش می‌دهد. مسیرها به‌صورت چندخطی روی نقشه ترسیم می‌شوند. برای هر جفت مختصات در مسیر فعال یا باقی‌مانده خودرو، کتابخانه یک شیء 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();

قدم بعدی چیست

• سبک‌دار کردن نقشه
• سفارشی‌سازی نشانگرها