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

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

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