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

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

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

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

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

    • البيانات من ميزة "مشاركة الرحلة": تُرسِل ميزة "مشاركة الرحلة" بيانات العلامة إلى دالة customisation، بما في ذلك نوع العنصر الذي تمثّله العلامة: المركبة أو نقطة البداية أو نقطة الطريق أو الوجهة. يتغير نمط العلامة بعد ذلك بناءً على الحالة الحالية لعنصر العلامة. على سبيل المثال، عدد نقاط الالتفاف المتبقية إلى أن تنتهي المركبة من الرحلة.

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

    للحصول على أمثلة، اطّلِع على تغيير أسلوب العلامات باستخدام دوالّ التخصيص في هذا الدليل.

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

خيارات تخصيص قلم التحديد

يستخدم كلا الخيارَين مَعلمات التخصيص التالية في واجهة برمجة تطبيقات Google 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.
      });
    }
  };

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