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:

  • Paling sederhana: Tentukan objek MarkerOptions untuk diterapkan ke semua penanda dengan jenis yang sama. Kemudian, Consumer SDK akan menerapkan gaya visual 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 direpresentasikan oleh penanda: kendaraan atau tujuan. Hal ini memungkinkan gaya visual penanda berubah berdasarkan status elemen penanda itu sendiri saat ini; misalnya, jumlah perhentian terencana yang tersisa hingga tujuan. Anda bahkan dapat menggabungkan dengan data dari sumber di luar Fleet Engine dan menata gaya penanda berdasarkan informasi tersebut.

Contoh sederhana: gunakan 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 visual penanda kendaraan untuk menampilkan jumlah perhentian yang tersisa untuk kendaraan sebelum mencapai perhentian untuk tugas yang dijadwalkan.

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 lokasi atau kendaraan. 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