Menyesuaikan penanda

Menyesuaikan tampilan dan nuansa penanda yang ditambahkan ke peta. Sesuaikan tampilan dan nuansa penanda yang ditambahkan ke peta dengan dua cara:

1. Penanda gaya berdasarkan jenis: Tentukan objek MarkerOptions untuk menata gaya penanda dengan jenis yang sama. Perubahan yang Anda tentukan kemudian diterapkan setelah setiap penanda dibuat, yang akan menimpa opsi default apa pun. Misalnya, lihat Mengubah gaya penanda menggunakan MarkerOptions dalam panduan ini.

2. Penanda gaya berdasarkan data: Tentukan fungsi penyesuaian untuk menata gaya penanda berdasarkan data. Anda bisa menata gaya berdasarkan data dari berbagi perjalanan, atau dari sumber luar:

   • Data dari berbagi perjalanan: Berbagi perjalanan meneruskan data penanda ke fungsi penyesuaian, termasuk jenis objek yang diwakili penanda: kendaraan, asal, titik jalan, atau tujuan. Gaya visual penanda kemudian berubah berdasarkan status elemen penanda saat ini. Misalnya, jumlah titik jalan yang tersisa hingga kendaraan menyelesaikan perjalanan.

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

   Misalnya, lihat Mengubah gaya penanda menggunakan fungsi penyesuaian dalam panduan ini.

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

Opsi penyesuaian penanda

Kedua opsi tersebut menggunakan parameter penyesuaian berikut di Google Maps JavaScript API pada bagian FleetEngineTripLocationProviderOptions:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Mengubah gaya visual penanda menggunakan MarkerOptions

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

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Mengubah gaya visual penanda menggunakan fungsi penyesuaian

Contoh berikut menunjukkan cara mengonfigurasi gaya penanda kendaraan menggunakan fungsi penyesuaian. Ikuti pola ini untuk menyesuaikan gaya visual penanda apa pun menggunakan salah satu parameter penyesuaian penanda yang tercantum di Opsi penyesuaian penanda.

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

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

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 parameter penyesuaian penanda yang tercantum dalam Opsi penyesuaian penanda.

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

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

Langkah berikutnya

• Menyesuaikan polyline rute