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

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

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

چند خط استایل

مشابه روشی که می توانید نشانگرها را سفارشی کنید، می توانید چند خط مسیر را به روش های مختلف استایل دهید:

1. چند خطوط مسیر سبک بر اساس نوع : از PolylineOptions استفاده کنید تا به همه اشیاء Polyline مطابقت داده شده در هنگام ایجاد یا به‌روزرسانی اعمال شوند. برای مثال، به Style polylines بر اساس نوع نگاه کنید.

2. چند خط مسیر سبک بر اساس داده ها : یک تابع سفارشی سازی را بر اساس داده های ردیابی ناوگان یا منابع خارجی مشخص کنید:

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

   • منابع خارجی : می‌توانید داده‌های ردیابی ناوگان را با داده‌های منابع خارج از Fleet Engine ترکیب کنید و شی Polyline را بر اساس آن اطلاعات استایل دهید.

   برای مثال، به Style polylines بر اساس داده ها مراجعه کنید.

3. کنترل نمایان بودن چند خطوط مسیر : می توانید چند خطوط را با استفاده از ویژگی visible پنهان یا نمایش دهید. برای جزئیات، به کنترل دید چند خطی در این راهنما مراجعه کنید.

4. نمایش اطلاعات اضافی برای یک وسیله نقلیه یا نشانگر مکان : می توانید اطلاعات اضافی را با استفاده از ویژگی infowindow نشان دهید. برای جزئیات، به نمایش اطلاعات اضافی برای یک وسیله نقلیه یا نشانگر مکان در این راهنما مراجعه کنید.

گزینه های سفارشی سازی Polyline

گزینه های سفارشی سازی زیر در FleetEngineVehicleLocationProviderOptions و FleetEngineDeliveryVehicleLocationProviderOptions موجود هستند. شما می توانید سفارشی سازی هایی را برای حالت های مسیر مختلف در سفر خودرو تنظیم کنید:

• مسیر قبلاً طی شده : از takenPolylineCustomization - سفرهای درخواستی ، مرجع وظایف برنامه ریزی شده استفاده کنید.

• مسیر حرکت فعال : از activePolylineCustomization - سفرهای درخواستی ، مرجع وظایف برنامه ریزی شده استفاده کنید.

• مسیر هنوز طی نشده است : remainingPolylineCustomization - سفرهای درخواستی ، مرجع وظایف برنامه ریزی شده استفاده کنید.

چند خط مسیر را بر اساس نوع سبک کنید

برای استایل دادن به چند خطوط مسیر بر اساس نوع، استایل اشیاء Polyline را با استفاده از PolylineOptions تغییر دهید.

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

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

جاوا اسکریپت

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

TypeScript

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

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

برای استایل دادن به چند خطوط مسیر با استفاده از داده، استایل اشیاء Polyline را با استفاده از توابع سفارشی‌سازی تغییر دهید.

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

نمونه سفرهای درخواستی

جاوا اسکریپت

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

نمونه کارهای برنامه ریزی شده

جاوا اسکریپت

// 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 با توجه به سرعت ترافیک آنها استفاده کنید:

جاوا اسکریپت

// 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 قرار دهید.

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

جاوا اسکریپت

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

نمایش یک پنجره اطلاعاتی برای یک وسیله نقلیه یا نشانگر مکان

می توانید از InfoWindow برای نمایش اطلاعات اضافی در مورد یک وسیله نقلیه یا نشانگر موقعیت استفاده کنید.

مثال زیر نحوه ایجاد InfoWindow و اتصال آن به نشانگر خودرو را نشان می دهد.

نمونه سفرهای درخواستی

جاوا اسکریپت

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

نمونه کارهای برنامه ریزی شده

جاوا اسکریپت

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

بعدش چی

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