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

اختيار النظام الأساسي: 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.
      });
    }
  };

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