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

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

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

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

  • الطريقة الأبسط: حدِّد كائن MarkerOptions لتطبيقه على جميع العلامات من النوع نفسه. بعد ذلك، تطبِّق حزمة Consumer 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();

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