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

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

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>9;, () = {
        // Perform chosen action.
      });
    }
  };

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

مثال وظایف زمان‌بندی‌شده

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

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click>9;, () = {
        // 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);
    }
  };

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

• یک نقشه را سبک‌بندی کنید
• سفارشی‌سازی چندخطی‌ها