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

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

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

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

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

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

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

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

  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.
      });
    }
  };

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