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

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

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