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

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

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

• علامات مركبة التسليم: استخدِم deliveryVehicleMarkerCustomization
• علامات الوجهة: استخدِم destinationMarkerCustomization

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

• الأبسط: حدِّد كائن MarkerOptions لتطبيقه على جميع العلامات. من النوع نفسه. وتُطبق حزمة تطوير البرامج (SDK) للمستهلكين بعد ذلك النمط في الحالات: قبل إضافة العلامات إلى الخريطة، وعند استخدام البيانات تغيرت العلامات.
• أكثر تقدمًا: حدِّد وظيفة تخصيص. وظائف التخصيص يسمح بتصميم العلامات استنادًا إلى البيانات، فضلاً عن إضافة التفاعل مع العلامات، مثل معالجة النقر. على وجه التحديد، يميل المستهلك تمرر حزمة 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();

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

• تخصيص الخطوط المتعددة