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

باستخدام مكتبة 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);
    }
  };

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