Menyesuaikan penanda

Dokumen ini membahas cara menyesuaikan penanda kendaraan dan lokasi di peta yang Anda gunakan untuk aplikasi pelacakan pengiriman berbasis web bagi konsumen.

Dengan JavaScript Consumer SDK, Anda dapat menyesuaikan tampilan dan nuansa dua jenis penanda yang ditambahkan ke peta:

Anda melakukannya dengan salah satu dari dua cara berikut:

  • Paling sederhana: Tentukan objek MarkerOptions untuk diterapkan ke semua penanda dengan jenis yang sama. Kemudian, Consumer SDK menerapkan gaya dalam dua situasi: sebelum menambahkan penanda ke peta, dan saat data yang digunakan untuk penanda telah berubah.
  • Lebih lanjut: Tentukan fungsi penyesuaian. Fungsi penyesuaian memungkinkan penataan gaya penanda berdasarkan data, serta menambahkan interaksi ke penanda, seperti penanganan klik. Secara khusus, Consumer SDK meneruskan data ke fungsi penyesuaian tentang jenis objek yang diwakili penanda: kendaraan atau tujuan. Hal ini kemudian memungkinkan gaya penanda berubah berdasarkan status elemen penanda itu sendiri; misalnya, jumlah perhentian terencana yang tersisa hingga tujuan. Anda bahkan dapat menggabungkan data dari sumber di luar Fleet Engine dan menata penanda berdasarkan informasi tersebut.

Contoh sederhana: gunakan MarkerOptions

Contoh berikut menunjukkan cara mengonfigurasi gaya penanda kendaraan dengan objek MarkerOptions. Contoh ini menetapkan opasitas penanda ke 50%.

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Contoh lanjutan: menggunakan fungsi penyesuaian

Contoh berikut menunjukkan cara mengonfigurasi gaya penanda kendaraan untuk menampilkan jumlah perhentian yang tersisa bagi kendaraan sebelum mencapai perhentian untuk tugas terjadwal.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

Menambahkan penanganan klik ke penanda

Anda dapat menambahkan penanganan klik ke penanda apa pun, seperti dalam contoh berikut untuk penanda kendaraan.

JavaScript

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

TypeScript

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

Menampilkan informasi tambahan untuk penanda

Anda dapat menggunakan InfoWindow untuk menampilkan informasi tambahan tentang penanda kendaraan atau lokasi. Contoh berikut membuat InfoWindow dan melampirkannya ke penanda kendaraan:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Langkah berikutnya