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

پلتفرم را انتخاب کنید: Android iOS JavaScript

ظاهر و احساس نشانگرهای اضافه شده به نقشه را سفارشی کنید. ظاهر و احساس نشانگرهای اضافه شده به نقشه را به دو روش سفارشی کنید:

1. نشانگرهای سبک بر اساس نوع : یک شی MarkerOptions را برای نشانگرهای سبک از همان نوع مشخص کنید. سپس تغییراتی که مشخص می‌کنید پس از ایجاد هر نشانگر اعمال می‌شوند و گزینه‌های پیش‌فرض را بازنویسی می‌کنند. برای مثال، به تغییر سبک نشانگرها با استفاده از MarkerOptions در این راهنما مراجعه کنید.

2. نشانگرهای سبک بر اساس داده ها : یک تابع سفارشی سازی برای استایل نشانگرها بر اساس داده ها مشخص کنید. می‌توانید بر اساس داده‌های اشتراک‌گذاری سفر، یا از منابع خارجی، استایل‌سازی کنید:

   • داده‌های حاصل از اشتراک‌گذاری سفر : اشتراک‌گذاری سفر، داده‌های نشانگر را به تابع سفارشی‌سازی از جمله نوع شیئی که نشانگر نشان می‌دهد: وسیله نقلیه، مبدا، نقطه بین راهی یا مقصد، ارسال می‌کند. سپس استایل نشانگر بر اساس وضعیت فعلی عنصر نشانگر تغییر می کند. به عنوان مثال، تعداد ایستگاه های بین راهی باقی مانده تا زمانی که وسیله نقلیه سفر را به پایان برساند.

   • منابع خارجی : می‌توانید داده‌های اشتراک‌گذاری سفر را با داده‌های منابع خارج از Fleet Engine ترکیب کنید و نشانگر را نیز بر اساس آن اطلاعات استایل دهید.

   برای مثال، به تغییر سبک نشانگرها با استفاده از توابع سفارشی سازی در این راهنما مراجعه کنید.

3. افزودن کنترل کلیک به نشانگرها : برای مثال، به افزودن مدیریت کلیک مراجعه کنید.

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

هر دو گزینه از پارامترهای سفارشی سازی زیر در Google Maps JavaScript API تحت FleetEngineTripLocationProviderOptions استفاده می کنند:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

با استفاده از MarkerOptions استایل نشانگرها را تغییر دهید

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

جاوا اسکریپت

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

با استفاده از توابع سفارشی‌سازی، استایل نشانگرها را تغییر دهید

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

جاوا اسکریپت

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

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

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

جاوا اسکریپت

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

TypeScript

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

بعدش چی

• چند خطوط مسیر را سفارشی کنید