Dokumen ini membahas cara menyesuaikan tampilan dan nuansa rute untuk rute yang dilacak
kendaraan pada peta. Rute digambar pada peta dalam polyline. Untuk setiap pasangan
koordinat di jalur kendaraan yang aktif atau tersisa yang dibuat oleh library
Objek google.maps.Polyline
.
Anda dapat menata gaya objek Polyline
dengan menentukan penyesuaian polyline yang
library kemudian berlaku dalam dua situasi:
- Sebelum menambahkan objek ke peta
- Saat data yang digunakan untuk objek telah berubah
Menata gaya polyline
Mirip dengan bagaimana Anda bisa menyesuaikan penanda, Anda bisa menata gaya polyline rute di cara yang berbeda:
Menata gaya polyline rute menurut jenis: Gunakan
PolylineOptions
untuk diterapkan ke semua objekPolyline
yang cocok saat objek tersebut dibuat atau diperbarui. Untuk mengetahui contohnya, lihat Menata gaya polyline menurut jenis.Menata gaya polyline rute berdasarkan data: Menentukan fungsi penyesuaian berdasarkan data dari pelacakan fleet, atau dari sumber luar:
Data dari pelacakan fleet: Pelacakan perangkat meneruskan data polyline ke fungsi penyesuaian, termasuk data kendaraan saat ini status. Anda dapat menata gaya polyline berdasarkan data ini, termasuk pewarnaan objek
Polyline
ke shade yang lebih dalam, atau membuatnya lebih tebal saat kendaraan bergerak lebih lambat.Sumber luar: Anda dapat menggabungkan data pelacakan perangkat dengan data dari sumber di luar Fleet Engine dan memberi gaya objek
Polyline
berdasarkan hal tersebut tidak akurat atau tidak sesuai.
Sebagai contoh, lihat Menata gaya polyline berdasarkan data.
Mengontrol visibilitas polyline rute: Anda dapat menyembunyikan atau menampilkan polyline menggunakan properti
visible
. Untuk mengetahui detailnya, lihat Kontrol visibilitas polyline dalam panduan ini.Menampilkan informasi tambahan untuk penanda kendaraan atau lokasi: Anda dapat menampilkan informasi tambahan menggunakan properti
infowindow
. Sebagai detail, lihat Tampilkan informasi tambahan untuk penanda lokasi atau kendaraan di panduan ini.
Opsi penyesuaian polyline
Opsi penyesuaian berikut tersedia dalam
FleetEngineVehicleLocationProviderOptions
dan
FleetEngineDeliveryVehicleLocationProviderOptions
Anda bisa mengatur penyesuaian untuk berbagai status jalur di
perjalanan:
Jalur yang sudah dilalui: Gunakan
takenPolylineCustomization
- Perjalanan on demand, referensi Tugas terjadwal.Jalur bepergian secara aktif: Gunakan
activePolylineCustomization
- Perjalanan on demand, referensi Tugas terjadwal.Jalur yang belum ditempuh: Gunakan
remainingPolylineCustomization
- Perjalanan on demand, referensi Tugas terjadwal.
Menata gaya polyline rute menurut jenis
Untuk menata gaya polyline rute berdasarkan jenis, ubah gaya objek Polyline
menggunakan PolylineOptions
.
Contoh berikut menunjukkan cara mengonfigurasi gaya visual untuk objek Polyline
dengan PolylineOptions
. Ikuti pola ini untuk menyesuaikan gaya visual
Objek Polyline
menggunakan salah satu penyesuaian polyline rute yang tercantum di
Opsi penyesuaian polyline dalam panduan ini.
Contoh perjalanan on demand atau tugas terjadwal
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Menata gaya polyline rute menggunakan data
Untuk menata gaya polyline rute menggunakan data, ubah gaya objek Polyline
menggunakan fungsi penyesuaian.
Contoh berikut menunjukkan cara mengonfigurasi gaya visual untuk rute aktif
menggunakan fungsi penyesuaian. Ikuti pola ini untuk menyesuaikan gaya
objek Polyline
apa pun menggunakan salah satu parameter penyesuaian polyline yang tercantum
dalam Opsi penyesuaian polyline dalam panduan ini.
Contoh perjalanan on demand
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Contoh tugas terjadwal
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Contoh gaya visual berbasis traffic (khusus perjalanan on demand)
Fleet Engine menampilkan data kecepatan lalu lintas untuk jalur aktif dan tersisa untuk
kendaraan yang digunakan. Anda dapat menggunakan informasi ini untuk menata gaya Polyline
sesuai dengan kecepatan lalu lintasnya:
JavaScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Mengontrol visibilitas polyline
Secara default, semua objek Polyline
terlihat. Untuk membuat objek Polyline
tidak terlihat, tetapkan properti visible
-nya ke false
.
Contoh perjalanan on demand atau tugas terjadwal
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Menampilkan jendela informasi untuk penanda lokasi atau kendaraan
Anda dapat menggunakan InfoWindow
untuk menampilkan informasi tambahan tentang
penanda kendaraan atau lokasi.
Contoh berikut menunjukkan cara membuat InfoWindow
dan melampirkannya ke
penanda kendaraan.
Contoh perjalanan on demand
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off point.`);
// 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});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off.`);
// 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();
Contoh tugas terjadwal
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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();