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

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

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

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