سفارشی‌سازی نشانگرها

این سند نحوه سفارشی‌سازی نشانگرهای مکان و خودرو را در نقشه‌ای که برای برنامه ردیابی محموله مبتنی بر وب برای مصرف‌کنندگان استفاده می‌کنید پوشش می‌دهد.

با «کیت توسعه نرم‌افزار مصرف‌کننده جاوا اسکریپت»، می‌توانید ظاهر و احساس دو نوع نشانه اضافه شده به نقشه را سفارشی‌سازی کنید:

این کار را به یکی از دو روش زیر انجام می‌دهید:

  • ساده‌ترین: یک شیء MarkerOptions را مشخص کنید تا روی همه نشانگرهای از همان نوع اعمال شود. سپس Consumer SDK سبک را در دو موقعیت اعمال می‌کند: قبل‌از افزودن نشانگرها به نقشه، و زمانی که داده‌های استفاده‌شده برای نشانگرها تغییر کرده باشد.
  • پیشرفته‌تر: تابع سفارشی‌سازی را مشخص کنید. عملکردهای سفارشی‌سازی امکان سبک‌دهی به نشانگرها براساس داده‌ها و همچنین افزودن تعامل به نشانگرها، مانند مدیریت کلیک را فراهم می‌کنند. به‌طور خاص، Consumer SDK داده‌هایی را درباره نوع شیء نشانگر (خودرو یا مقصد) به تابع سفارشی‌سازی ارسال می‌کند. این کار به سبک‌بندی نشانگر اجازه می‌دهد تا براساس وضعیت فعلی عنصر نشانگر تغییر کند؛ برای مثال، تعداد توقف‌های برنامه‌ریزی‌شده باقی‌مانده تا مقصد. حتی می‌توانید داده‌های منابع خارج از Fleet Engine را ادغام کنید و براساس آن اطلاعات، نشانگر را سبک‌بندی کنید.

مثال ساده: استفاده از MarkerOptions

مثال زیر نحوه پیکربندی سبک‌سازی نشانگر خودرو را با MarkerOptions شیء نشان می‌دهد. این مثال ماتی نشانه را روی ۵۰٪ تنظیم می‌کند.

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();

قدم بعدی چیست