نشانگرها را سفارشی کنید

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

1. نشانگرهای سبک بر اساس نوع : یک شی MarkerOptions را برای نشانگرهای سبک از همان نوع مشخص کنید. سپس تغییراتی که مشخص می‌کنید پس از ایجاد هر نشانگر اعمال می‌شوند و گزینه‌های پیش‌فرض را بازنویسی می‌کنند. برای مثال، نشانگرهای سبک بر اساس نوع را در این راهنما ببینید.

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

   • داده‌های ردیابی ناوگان : ردیابی ناوگان داده‌ها را به تابع سفارشی‌سازی از جمله نوع شیئی که نشانگر نشان می‌دهد: وسیله نقلیه، توقف، یا وظیفه ارسال می‌کند. سپس استایل نشانگر بر اساس وضعیت فعلی عنصر نشانگر تغییر می کند. به عنوان مثال، تعداد توقف های باقی مانده یا نوع کار.

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

   برای مثال، نشانگرهای سبک را بر اساس داده ها ببینید.

3. افزودن کنترل کلیک به نشانگرها : برای مثال، به افزودن مدیریت کلیک مراجعه کنید.

4. فیلتر کردن نشانگرهای قابل مشاهده : فیلتر کردن نشانگرهایی که با قابلیت‌های فیلتر موجود در ارائه‌دهنده مکان جاوا اسکریپت ظاهر می‌شوند. به عنوان مثال:

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter

5. استفاده از سفارشی سازی نشانگر برای ردیابی وسیله نقلیه تحویل وظایف برنامه ریزی شده : می توانید نشانگرها را برای ردیابی وسایل نقلیه سفارشی کنید. برای اطلاعات بیشتر، استفاده از سفارشی سازی نشانگر برای ردیابی وسیله نقلیه تحویل را ببینید.

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

کتابخانه ردیابی ناوگان پارامترهای سفارشی سازی زیر را ارائه می دهد:

پارامترهای سفارشی سازی سفرهای درخواستی

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

پارامترهای سفارشی سازی وظایف برنامه ریزی شده

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

نشانگرهای سبک بر اساس نوع

مثال زیر نحوه پیکربندی استایل نشانگر خودرو را با شیء MarkerOptions نشان می دهد. این الگو را دنبال کنید تا با استفاده از هر یک از گزینه های فهرست شده در گزینه های سفارشی سازی نشانگر، استایل هر نشانگر را سفارشی کنید.

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

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

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

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

نشانگرهای سبک بر اساس داده ها

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

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

vehicleMarkerCustomization =
  (params) => {
    const remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

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

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

کنترل کلیک را به نشانگرها اضافه کنید

مثال زیر نشان می دهد که چگونه می توان کنترل کلیک را به نشانگر خودرو اضافه کرد. این الگو را دنبال کنید تا با استفاده از هر یک از گزینه‌های فهرست شده در گزینه‌های سفارشی‌سازی نشانگر فهرست شده در بالا، مدیریت کلیک را به هر نشانگری اضافه کنید.

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

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

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

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

نشانگرهای قابل مشاهده را فیلتر کنید

اگر نیاز به استفاده از setVisible دارید، از این الگو پیروی کنید تا هر نشانگر را با استفاده از هر یک از گزینه‌های فهرست شده در گزینه‌های سفارشی‌سازی نشانگر در بالا فیلتر کنید.

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

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

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

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

بعدش چی

• یک نقشه طراحی کنید
• سفارشی کردن چند خط