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

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

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

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

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

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

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

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

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

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

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

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

تغيير نمط العلامات باستخدام 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.
      });
    }
  };

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

• تخصيص الخطوط المتعددة للمسار