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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

JavaScript

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}`);
};

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

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

JavaScript

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.
      });
    }
  };

قدم بعدی چیست