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 dapat melakukannya dengan salah satu dari dua cara berikut:

  • Termudah: Tentukan objek MarkerOptions untuk diterapkan ke semua penanda dengan jenis yang sama. Consumer SDK kemudian 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 interaktif ke penanda, seperti penanganan klik. Secara khusus, SDK Konsumen 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 saat ini; misalnya, jumlah perhentian yang direncanakan yang tersisa hingga tujuan. Anda bahkan dapat bergabung dengan data dari sumber di luar Fleet Engine dan menata gaya penanda berdasarkan informasi tersebut.

Contoh sederhana: menggunakan MarkerOptions

Contoh berikut menunjukkan cara mengonfigurasi gaya visual 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 untuk 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 kendaraan atau penanda 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