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

يتناول هذا المستند كيفية تخصيص علامات المركبات والمواقع الجغرافية في الخريطة التي تستخدمها في تطبيق تتبُّع الشحنات المستند إلى الويب والمخصّص للمستهلكين.

باستخدام حزمة تطوير البرامج (SDK) للمستهلكين في JavaScript، يمكنك تخصيص شكل ومظهر نوعَين من العلامات المضافة إلى الخريطة:

يمكنك إجراء ذلك بإحدى الطريقتَين التاليتَين:

  • الأبسط: حدِّد عنصر MarkerOptions لتطبيقه على جميع العلامات من النوع نفسه. تطبِّق حزمة تطوير البرامج (SDK) الخاصة بالمستهلك بعد ذلك أنماط العرض في حالتين: قبل إضافة العلامات إلى الخريطة، وعندما تتغيّر البيانات المستخدَمة في العلامات.
  • متقدّمة: حدِّد دالة تخصيص. تتيح دوال التخصيص تنسيق العلامات استنادًا إلى البيانات، بالإضافة إلى إضافة عناصر تفاعلية إلى العلامات، مثل معالجة النقرات. على وجه التحديد، يمرّر Consumer SDK البيانات إلى دالة التخصيص بشأن نوع العنصر الذي يمثّله العلامة: مركبة أو وجهة. ويتيح ذلك تغيير نمط العلامة استنادًا إلى الحالة الحالية لعنصر العلامة نفسه، مثل عدد المحطات المتبقية حتى الوجهة. يمكنك حتى الربط ببيانات من مصادر خارج Fleet Engine وتصميم العلامة استنادًا إلى هذه المعلومات.

مثال بسيط: استخدام MarkerOptions

يوضّح المثال التالي كيفية ضبط نمط علامة مركبة باستخدام عنصر MarkerOptions. يضبط هذا المثال مستوى عتامة العلامة على %50.

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

مثال متقدّم: استخدام دالة تخصيص

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

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

يمكنك إضافة معالجة النقرات إلى أي علامة، كما هو موضّح في المثال التالي لإحدى علامات المركبات.

JavaScript

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

TypeScript

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

عرض معلومات إضافية عن العلامات

يمكنك استخدام InfoWindow لعرض معلومات إضافية حول مركبة أو علامة موقع جغرافي. ينشئ المثال التالي InfoWindow ويربطه بعلامة مركبة:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

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