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

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

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

چندخطی‌های سبک

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

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

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

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

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

    برای مثال، به بخش «سبک‌سازی چندخطی‌ها بر اساس داده‌ها» مراجعه کنید.

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

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

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

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

استایل‌دهی به پلی‌لاین‌های مسیر بر اساس نوع

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

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

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

جاوا اسکریپت

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

تایپ اسکریپت

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

استایل‌دهی به پلی‌لاین‌های مسیر با استفاده از داده‌ها

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

مثال زیر نحوه پیکربندی استایل‌بندی برای یک مسیر فعال با استفاده از یک تابع سفارشی‌سازی را نشان می‌دهد. برای سفارشی‌سازی استایل‌بندی هر شیء 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'});
      }
    }
  };

تایپ اسکریپت

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

تایپ اسکریپت

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

مثالی از یک ظاهر طراحی شده با توجه به ترافیک (فقط سفرهای درخواستی)

موتور ناوگان، داده‌های سرعت ترافیک را برای مسیرهای فعال و باقی‌مانده برای وسیله نقلیه دنبال‌شده برمی‌گرداند. می‌توانید از این اطلاعات برای استایل‌دهی به اشیاء 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'});
      }
    }
  };

تایپ اسکریپت

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

تایپ اسکریپت

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

تایپ اسکریپت

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

تایپ اسکریپت

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

قدم بعدی چیست؟