نشانگرها را سفارشی کنید

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

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

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

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

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

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

جاوا اسکریپت

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

تایپ اسکریپت

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

مثال پیشرفته: استفاده از یک تابع سفارشی‌سازی

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

جاوا اسکریپت

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

تایپ اسکریپت

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

افزودن قابلیت مدیریت کلیک به نشانگرها

شما می‌توانید قابلیت کنترل کلیک را به هر نشانگری اضافه کنید، مانند مثال زیر برای نشانگر وسیله نقلیه.

جاوا اسکریپت

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

تایپ اسکریپت

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

نمایش اطلاعات اضافی برای نشانگرها

شما می‌توانید از یک InfoWindow برای نمایش اطلاعات اضافی در مورد یک وسیله نقلیه یا نشانگر مکان استفاده کنید. مثال زیر یک InfoWindow ایجاد کرده و آن را به یک نشانگر وسیله نقلیه متصل می‌کند:

جاوا اسکریپت

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

تایپ اسکریپت

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

قدم بعدی چیست؟