Dokumen ini membahas cara menyesuaikan penanda kendaraan dan lokasi 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:
- Penanda kendaraan pengiriman: gunakan
deliveryVehicleMarkerCustomization
- Penanda tujuan: gunakan
destinationMarkerCustomization
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 yang penanda mewakili: kendaraan atau tujuan. Hal ini memungkinkan gaya visual penanda untuk berubah berdasarkan status terkini elemen penanda itu sendiri; untuk misalnya, jumlah rencana perhentian 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();