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

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

با JavaScript Consumer SDK، می توانید ظاهر و احساس دو نوع نشانگر اضافه شده به نقشه را سفارشی کنید:

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

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

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

مثال زیر نحوه پیکربندی استایل نشانگر خودرو را با شیء MarkerOptions نشان می دهد. این مثال Opacity نشانگر را روی 50% تنظیم می کند.

جاوا اسکریپت 

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript 

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

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

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

جاوا اسکریپت 

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

TypeScript 

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

کنترل کلیک را به نشانگرها اضافه کنید

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

جاوا اسکریپت 

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 ایجاد می کند و آن را به نشانگر خودرو متصل می کند:

جاوا اسکریپت 

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

بعدش چی