Menyesuaikan penanda

Pilih platform: Android iOS JavaScript

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

  1. Gaya penanda berdasarkan jenis: Tentukan objek MarkerOptions untuk memberi gaya pada penanda dengan jenis yang sama. Perubahan yang Anda tentukan kemudian diterapkan setelah setiap penanda dibuat, menggantikan opsi default apa pun. Untuk contohnya, lihat Mengubah gaya penanda menggunakan MarkerOptions dalam panduan ini.

  2. Gaya penanda berdasarkan data: Tentukan fungsi penyesuaian untuk mengatur gaya penanda berdasarkan data. Anda dapat menerapkan gaya berdasarkan data dari fitur berbagi perjalanan, atau dari sumber eksternal:

    • 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 penanda kemudian berubah berdasarkan status elemen penanda saat ini. Misalnya, jumlah titik jalan yang tersisa hingga kendaraan menyelesaikan perjalanan.

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

    Untuk melihat contoh, lihat bagian Mengubah gaya penanda menggunakan fungsi penyesuaian dalam panduan ini.

  3. Menambahkan penanganan klik ke penanda: Untuk contoh, lihat Menambahkan penanganan klik.

Opsi penyesuaian penanda

Kedua opsi menggunakan parameter penyesuaian berikut di Google Maps JavaScript API dalam FleetEngineTripLocationProviderOptions:

Mengubah gaya penanda menggunakan MarkerOptions

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

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Mengubah gaya penanda menggunakan fungsi penyesuaian

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

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

Menambahkan penanganan klik ke penanda

Contoh berikut menunjukkan cara menambahkan penanganan klik ke penanda kendaraan. Ikuti pola ini untuk menambahkan penanganan klik ke penanda mana pun menggunakan salah satu parameter penyesuaian penanda yang tercantum di Opsi penyesuaian penanda.

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

Langkah berikutnya