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

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

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