Sesuaikan Penanda

Dengan library pelacakan fleet JavaScript, Anda dapat menyesuaikan tampilan dan nuansa penanda yang ditambahkan ke peta. Anda melakukannya dengan menentukan penyesuaian penanda, yang kemudian diterapkan oleh library pelacakan fleet sebelum menambahkan penanda ke peta dan setiap pembaruan penanda. Anda bisa menyesuaikan tampilan dan nuansa penanda di cara berikut ini:

1. Penanda gaya berdasarkan jenis: Tentukan MarkerOptions untuk memberi gaya penanda dengan jenis yang sama. Perubahan yang Anda tetapkan kemudian diterapkan setelah setiap penanda dibuat, yang menimpa opsi default apa pun. Sebagai contohnya, lihat Mengatur gaya penanda berdasarkan jenis di panduan ini.

2. Penanda gaya berdasarkan data: Menentukan fungsi penyesuaian berdasarkan data, serta menambahkan interaktivitas ke penanda, seperti penanganan klik. Anda dapat mengatur gaya berdasarkan data dari pelacakan fleet, atau dari sumber luar:

   • Data dari pelacakan fleet: Pelacakan Armada meneruskan data ke fungsi penyesuaian termasuk jenis objek penanda mewakili: kendaraan, perhentian, atau tugas. Gaya visual penanda kemudian berubah berdasarkan status elemen penanda saat ini. Misalnya, jumlah perhentian yang tersisa atau jenis tugas.

   • Sumber luar: Anda dapat menggabungkan data pelacakan perangkat dengan data dari sumber di luar Fleet Engine dan memberi gaya penanda berdasarkan informasi.

   Misalnya, lihat Menata gaya penanda berdasarkan data.

3. Menambahkan penanganan klik ke penanda: Untuk mengetahui contohnya, lihat Tambahkan penanganan klik.

4. Memfilter penanda yang terlihat: Memfilter penanda yang muncul dengan kemampuan pemfilteran yang tersedia di lokasi JavaScript penyedia layanan. Contoh:

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter
   Catatan: Meskipun Anda juga dapat memfilter visibilitas penanda menggunakan penyesuaian tidak berfungsi, dapat memengaruhi performa. Jika terpaksa melakukannya, panggil setVisible(false) pada penanda. Untuk contoh, lihat Filter penanda yang terlihat.

5. Gunakan penyesuaian penanda untuk melacak kendaraan pengiriman tugas terjadwal: Anda dapat menyesuaikan penanda untuk melacak kendaraan. Untuk informasi selengkapnya, lihat Menggunakan penyesuaian penanda untuk melacak kendaraan pengiriman.

Opsi penyesuaian penanda

Library pelacakan fleet menyediakan parameter penyesuaian berikut:

Parameter penyesuaian perjalanan on demand

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

Parameter penyesuaian tugas terjadwal

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

Penanda gaya berdasarkan jenis

Contoh berikut menunjukkan cara mengonfigurasi gaya visual penanda kendaraan dengan objek MarkerOptions. Ikuti pola ini untuk menyesuaikan gaya visual penanda menggunakan salah satu opsi yang tercantum dalam Opsi penyesuaian penanda.

Contoh perjalanan on demand

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Contoh tugas terjadwal

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Menata gaya penanda berdasarkan data

Contoh berikut menunjukkan cara mengonfigurasi gaya visual penanda kendaraan menggunakan fungsi penyesuaian. Ikuti pola ini untuk menyesuaikan gaya visual penanda berdasarkan data menggunakan salah satu opsi yang tercantum dalam Opsi penyesuaian penanda yang tercantum di atas.

Contoh perjalanan on demand

JavaScript

vehicleMarkerCustomization =
  (params) => {
    const remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

Contoh tugas terjadwal

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

Menambahkan penanganan klik ke penanda

Contoh berikut menunjukkan cara menambahkan penanganan klik ke penanda kendaraan. Ikuti pola ini untuk menambahkan penanganan klik ke penanda menggunakan salah satu opsi yang tercantum dalam Opsi penyesuaian penanda yang tercantum di atas.

Contoh perjalanan on demand

JavaScript

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

TypeScript

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

Contoh tugas terjadwal

JavaScript

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

TypeScript

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

Memfilter penanda yang terlihat

Perhatian: Jika Anda memfilter visibilitas penanda menggunakan setVisible, filter ini dapat memengaruhi performa. Sebagai praktik terbaik, Anda harus memfilter penanda yang muncul dengan kemampuan pemfilteran yang tersedia di penyedia lokasi JavaScript.

Jika Anda perlu menggunakan setVisible, ikuti pola ini untuk memfilter semua penanda menggunakan salah satu opsi yang tercantum dalam Opsi penyesuaian penanda di atas.

Contoh perjalanan on demand

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Contoh tugas terjadwal

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

Langkah berikutnya

• Menata gaya peta
• Menyesuaikan polyline