Dengan library pelacakan fleet JavaScript, Anda dapat menyesuaikan tampilan dan nuansa penanda yang ditambahkan ke peta. Anda melakukannya dengan menentukan penyesuaian penanda, yang kemudian diterapkan oleh library pelacakan armada sebelum menambahkan penanda ke peta dan dengan setiap pembaruan penanda. Anda dapat menyesuaikan tampilan dan nuansa penanda dengan cara berikut:
Penanda gaya berdasarkan jenis: Tentukan objek
MarkerOptions
untuk menata gaya penanda dengan jenis yang sama. Perubahan yang Anda tentukan kemudian diterapkan setelah setiap penanda dibuat, sehingga menimpa opsi default apa pun. Untuk contoh, lihat Menata gaya penanda berdasarkan jenis dalam panduan ini.Penanda gaya berdasarkan data: Menentukan fungsi penyesuaian berdasarkan data, serta menambahkan interaktivitas ke penanda, seperti penanganan klik. Anda dapat mengatur gaya berdasarkan data dari pelacakan fleet, atau dari sumber luar:
Data dari pelacakan fleet: Pelacakan Fleet meneruskan data ke fungsi penyesuaian termasuk jenis objek yang diwakili penanda: kendaraan, perhentian, atau tugas. Gaya penanda kemudian berubah berdasarkan status elemen penanda saat ini. Misalnya, jumlah perhentian yang tersisa atau jenis tugas.
Sumber luar: Anda dapat menggabungkan data pelacakan armada dengan data dari sumber di luar Fleet Engine dan menata gaya penanda berdasarkan informasi tersebut juga.
Misalnya, lihat bagian Menata gaya penanda berdasarkan data.
Menambahkan penanganan klik ke penanda: Untuk contohnya, lihat Menambahkan penanganan klik.
Memfilter penanda yang terlihat: Memfilter penanda yang muncul dengan kemampuan pemfilteran yang tersedia di penyedia lokasi JavaScript. Contoh:
Gunakan penyesuaian penanda untuk melacak kendaraan pengiriman tugas terjadwal: Anda dapat menyesuaikan penanda untuk melacak kendaraan. Untuk informasi selengkapnya, lihat Menggunakan penyesuaian penanda untuk melacak kendaraan pengiriman.
Opsi penyesuaian penanda
Library pelacakan armada menyediakan parameter penyesuaian berikut:
Parameter penyesuaian perjalanan on demand
Parameter penyesuaian tugas terjadwal
Gaya penanda berdasarkan jenis
Contoh berikut menunjukkan cara mengonfigurasi gaya visual penanda kendaraan dengan objek MarkerOptions
. Ikuti pola ini untuk menyesuaikan gaya penanda menggunakan salah satu opsi yang tercantum di Opsi penyesuaian penanda.
Contoh perjalanan on demand
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Contoh tugas terjadwal
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Gaya penanda berdasarkan data
Contoh berikut menunjukkan cara mengonfigurasi gaya visual penanda kendaraan menggunakan fungsi penyesuaian. Ikuti pola ini untuk menyesuaikan gaya visual penanda berdasarkan data menggunakan salah satu opsi yang tercantum dalam Opsi penyesuaian penanda yang tercantum di atas.
Contoh perjalanan on demand
JavaScript
vehicleMarkerCustomization =
(params) => {
const remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
Contoh tugas terjadwal
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
Menambahkan penanganan klik ke penanda
Contoh berikut menunjukkan cara menambahkan penanganan klik ke penanda kendaraan. Ikuti pola ini untuk menambahkan penanganan klik ke penanda mana pun menggunakan salah satu opsi yang tercantum dalam Opsi penyesuaian penanda yang tercantum di atas.
Contoh perjalanan on demand
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
Contoh tugas terjadwal
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
Memfilter penanda yang terlihat
Jika Anda perlu menggunakan setVisible
, ikuti pola ini untuk memfilter penanda menggunakan salah satu opsi yang tercantum di Opsi penyesuaian penanda di atas.
Contoh perjalanan on demand
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
Contoh tugas terjadwal
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};