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

اختيار النظام الأساسي: Android iOS JavaScript

تخصيص شكل ومظهر العلامات التي تمت إضافتها إلى الخريطة. تخصيص المظهر ومظهر العلامات التي تمت إضافتها إلى الخريطة بطريقتين:

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

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

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

    • المصادر الخارجية: يمكنك الجمع بين بيانات مشاركة الرحلة مع البيانات من مصادر خارج Fleet Engine وتصميم العلامة بناءً على ذلك المعلومات أيضًا.

    على سبيل المثال، راجع تغيير نمط العلامات باستخدام وظائف التخصيص الواردة في هذا الدليل.

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

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

يستخدم كلا الخيارين مَعلمات التخصيص التالية في حساب Maps JavaScript API ضمن FleetEngineTripLocationProviderOptions:

تغيير نمط العلامات باستخدام MarkerOptions

يوضّح المثال التالي كيفية ضبط تصميم محدّد موقع المركبة باستخدام عنصر MarkerOptions. اتّبِع هذا النمط لتخصيص أسلوب أيّ علامة باستخدام أيّ من تخصيصات العلامات المدرَجة في خيارات تخصيص العلامات.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

تغيير تصميم العلامات باستخدام دوالّ التخصيص

يوضّح المثال التالي كيفية ضبط أسلوب علامة المركبة باستخدام وظائف التخصيص. اتبع هذا النمط لتخصيص تصميم أي باستخدام أي من معلمات تخصيص العلامة المدرجة في خيارات تخصيص العلامة:

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

إضافة معالجة النقر إلى العلامات

يوضّح المثال التالي كيفية إضافة طريقة التعامل مع النقرات إلى علامة المركبة. اتبع هذا النمط لإضافة معالجة النقر إلى أي علامة باستخدام أي من العلامات مَعلمات التخصيص المدرَجة في خيارات تخصيص العلامة

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

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