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

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

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

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

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

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

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

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

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

يستخدم كلا الخيارين مَعلمات التخصيص التالية في Google Maps JavaScript API ضمن FleetEngineTripLocationProviderOptions:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

تغيير نمط العلامات باستخدام MarkerOptions

يوضّح المثال التالي كيفية ضبط نمط علامة المركبة باستخدام عنصر MarkerOptions. اتّبِع هذا النمط لتخصيص تصميم أي علامة باستخدام أي من خيارات التخصيص المدرَجة في خيارات تخصيص العلامات.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

تغيير نمط العلامات باستخدام دوال التخصيص

يوضّح المثال التالي كيفية ضبط نمط علامة المركبة باستخدام دوال التخصيص. اتّبِع هذا النمط لتخصيص تصميم أي علامة باستخدام أي من معلَمات تخصيص العلامات المدرَجة في خيارات تخصيص العلامات.

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

إضافة معالجة النقرات إلى العلامات

يوضّح المثال التالي كيفية إضافة معالجة النقرات إلى علامة مركبة. اتّبِع هذا النمط لإضافة معالجة النقرات إلى أي علامة باستخدام أيّ من مَعلمات التخصيص الخاصة بالعلامة والمدرَجة في خيارات تخصيص العلامات.

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

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

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