تخصيص العلامات

من خلال مكتبة تتبع مجموعة JavaScript، يمكنك تخصيص الشكل والمظهر من العلامات التي تمت إضافتها إلى الخريطة. يمكنك فعل ذلك عن طريق تحديد تخصيصات العلامة، الذي تطبقه مكتبة تتبع الأسطول قبل إضافة علامات إلى الخريطة ومع كل تحديث محدد للموقع. يمكنك تخصيص شكل ومظهر محدّدات المواقع في الطرق التالية:

1. علامات النمط استنادًا إلى النوع: حدد MarkerOptions كائن إلى علامات النمط من النوع نفسه. بعد ذلك، تظهر التغييرات التي تحددها بعد إنشاء كل علامة، وستستبدل أي خيارات افتراضية. بالنسبة راجع علامات الأنماط استنادًا إلى النوع في هذا الدليل.

2. علامات أنماط استنادًا إلى البيانات: تحديد دالة تخصيص استنادًا إلى البيانات، فضلاً عن إضافة التفاعل إلى العلامات، مثل معالجة النقر. يمكنك اختيار التصميم استنادًا إلى البيانات من تتبُّع الأسطول أو من مصادر خارجية:

   • البيانات من تتبُّع الأسطول: تعمل ميزة "تتبُّع الأسطول" على تمرير البيانات إلى دالة التخصيص التي تشمل نوع الكائن والعلامة يمثل: مركبة، أو توقف، أو مهمة. يتم تغيير نمط العلامة بعد ذلك استنادًا إلى الحالة الحالية لعنصر العلامة. على سبيل المثال، الرقم المحطات المتبقية أو نوع المهمة.

   • المصادر الخارجية: يمكنك الجمع بين بيانات تتبُّع الأسطول والبيانات الواردة من المصادر خارج Fleet Engine وتصميم العلامة بناءً على ذلك المعلومات أيضًا.

   للحصول على أمثلة، راجِع علامات الأنماط استنادًا إلى البيانات.

3. إضافة معالجة النقر إلى العلامات: للحصول على أمثلة، راجع إضافة طريقة معالجة النقرات

4. فلترة العلامات التي تكون مرئية: فلترة العلامات التي تظهر مع إمكانات الفلترة المتاحة في موقع JavaScript المستخدم. على سبيل المثال:

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter
   ملاحظة: بينما يمكنك أيضًا فلترة مستوى ظهور العلامة باستخدام التخصيص المختلفة، فقد يؤثر ذلك على الأداء. إذا كان عليك إجراء ذلك، يُرجى الاتصال setVisible(false) على محدّد الموقع. على سبيل المثال، راجع فلترة العلامات التي تكون مرئية

5. استخدام تخصيص محدِّد الموقع لتتبُّع مركبة تسليم المهام المُجدوَلة: يمكنك تخصيص محدّدات المواقع لتتبّع المركبات. لمزيد من المعلومات، راجع استخدام تخصيص محدّد الموقع لتتبُّع مركبة التسليم

خيارات تخصيص العلامة

توفّر مكتبة تتبُّع الأسطول مَعلمات التخصيص التالية:

مَعلمات تخصيص الرحلات عند الطلب

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

مَعلمات تخصيص المهام المُجدوَلة

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

علامات الأنماط استنادًا إلى النوع

يوضح المثال التالي كيفية ضبط تصميم علامة المركبة باستخدام عنصر MarkerOptions. اتبع هذا النمط لتخصيص تصميم أي باستخدام أي من الخيارات المدرجة في خيارات تخصيص العلامة:

مثال على الرحلات عند الطلب

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

مثال على المهام المُجدوَلة

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

علامات الأنماط استنادًا إلى البيانات

يوضح المثال التالي كيفية ضبط تصميم علامة المركبة باستخدام وظائف التخصيص. اتبع هذا النمط لتخصيص تصميم أي يستند إلى البيانات باستخدام أي من الخيارات المدرجة في خيارات تخصيص العلامة الواردة أعلاه.

مثال على الرحلات عند الطلب

JavaScript

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

TypeScript

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

مثال على المهام المُجدوَلة

JavaScript

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

TypeScript

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

إضافة معالجة النقر إلى العلامات

يوضّح المثال التالي كيفية إضافة طريقة التعامل مع النقرات إلى محدّد الموقع للمركبة. اتبع هذا النمط لإضافة معالجة النقر إلى أي علامة باستخدام أي من الخيارات المدرَجة في خيارات تخصيص العلامة المدرَجة أعلاه.

مثال على الرحلات عند الطلب

JavaScript

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

TypeScript

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

مثال على المهام المُجدوَلة

JavaScript

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

TypeScript

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

فلترة العلامات المرئية

تنبيه: في حال فلترة إذن الوصول إلى العلامة باستخدام setVisible، قد يؤدي ذلك إلى التأثير في الأداء. كأفضل ممارسة، يجب تصفية العلامات التي تظهر إمكانات الفلترة المتاحة في موفِّر الموقع الجغرافي بلغة JavaScript.

إذا كنت بحاجة إلى استخدام setVisible، اتّبِع هذا النمط لفلترة أي علامات. باستخدام أيّ من الخيارات المدرَجة في خيارات تخصيص العلامة أعلاه.

مثال على الرحلات عند الطلب

JavaScript

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

TypeScript

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

مثال على المهام المُجدوَلة

JavaScript

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

TypeScript

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

الخطوات التالية

• تصميم خريطة
• تخصيص الخطوط المتعددة