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

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

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

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

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

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

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

  3. إضافة معالجة النقرات إلى العلامات: للاطّلاع على أمثلة، راجِع إضافة معالجة النقرات.

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

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

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

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

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

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

تنسيق العلامات استنادًا إلى النوع

يوضّح المثال التالي كيفية ضبط تنسيق علامة مركبة باستخدام عنصر 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

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);
    }
  };

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