Menyesuaikan penanda

Dokumen ini membahas cara menyesuaikan penanda lokasi dan kendaraan di peta Anda gunakan untuk aplikasi pelacakan pengiriman berbasis web untuk 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 yang akan diterapkan ke semua penanda dari jenis yang sama. Consumer SDK kemudian menerapkan gaya visual dalam dua situasi: sebelum menambahkan penanda ke peta dan saat data digunakan untuk penanda telah berubah.
  • Lebih lanjut: Tentukan fungsi penyesuaian. Fungsi penyesuaian memungkinkan penataan gaya penanda berdasarkan data, serta menambahkan interaktivitas terhadap penanda, seperti penanganan klik. Secara khusus, Konsumen SDK meneruskan data ke fungsi penyesuaian tentang jenis objek penanda mewakili: kendaraan atau tujuan. Hal ini memungkinkan gaya visual penanda untuk berubah berdasarkan status terkini elemen penanda itu sendiri; untuk misalnya, jumlah perhentian terencana yang tersisa hingga tujuan. Anda bahkan bisa bergabung dengan data dari sumber di luar Fleet Engine dan menata gaya 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 mana 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 memasangnya 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