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

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

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

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

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

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

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

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

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

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

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

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

• تخصيص المضلّعات المتعددة للمسار