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

باستخدام مكتبة تتبُّع الأسطول 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);
    }
  };

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

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