Library Pelacakan Armada JavaScript memungkinkan Anda memvisualisasikan lokasi
kendaraan di armadanya secara mendekati real time. Library ini menggunakan
Deliveries API
untuk memungkinkan visualisasi kendaraan pengiriman serta tugas. Seperti
Library Pelacakan Pengiriman JavaScript,
library ini berisi komponen peta JavaScript yang merupakan pengganti langsung
untuk entity google.maps.Map
standar dan komponen data agar terhubung
dengan Fleet Engine.
Komponen
Library Pelacakan Armada JavaScript menyediakan komponen untuk visualisasi kendaraan dan perhentian pengiriman, serta feed data mentah untuk PWT atau jarak yang tersisa ke pengiriman.
Tampilan peta Pelacakan Armada
Komponen tampilan peta Fleet Tracking memvisualisasikan lokasi kendaraan dan tugas. Jika rute untuk kendaraan diketahui, komponen tampilan peta akan menganimasikan kendaraan tersebut saat bergerak di sepanjang jalur yang diprediksi.
Penyedia lokasi
Penyedia lokasi menggunakan informasi yang disimpan di Fleet Engine untuk mengirimkan informasi lokasi untuk objek yang dilacak ke peta berbagi perjalanan.
Penyedia lokasi kendaraan pengiriman
Penyedia lokasi kendaraan pengiriman menampilkan satu informasi lokasi kendaraan pengiriman. Memiliki informasi tentang lokasi kendaraan serta tugas yang diselesaikan oleh kendaraan pengiriman.
Penyedia lokasi armada pengiriman
Penyedia lokasi armada pengiriman menampilkan informasi lokasi beberapa kendaraan. Anda dapat memfilter kendaraan atau lokasi tertentu, atau menampilkan seluruh armada.
Kontrol visibilitas lokasi yang dilacak
Bagian ini menjelaskan aturan visibilitas untuk objek lokasi yang dilacak pada peta untuk penyedia lokasi yang telah ditetapkan Fleet Engine. Penyedia lokasi kustom atau turunan dapat mengubah aturan visibilitas.
Kendaraan pengiriman
Kendaraan pengiriman akan langsung terlihat setelah dibuat di Fleet Engine, dan terlihat di sepanjang rutenya, terlepas dari tugasnya.
Penanda lokasi tugas
Perhentian kendaraan yang direncanakan ditampilkan pada peta sebagai penanda perhentian kendaraan. Penanda untuk tugas yang sudah selesai ditampilkan dengan gaya yang berbeda dengan perhentian yang direncanakan untuk kendaraan.
Lokasi hasil tugas ditampilkan dengan penanda hasil tugas. Tugas dengan hasil TODO ditampilkan dengan penanda tugas yang berhasil, sedangkan semua tugas lainnya ditampilkan dengan penanda tugas yang gagal.
Memulai Library Pelacakan Armada JavaScript
Sebelum menggunakan Library Pelacakan Fleet JavaScript, pastikan Anda telah memahami Fleet Engine dan mendapatkan kunci API. Kemudian, buat ID tugas dan klaim ID kendaraan pengiriman.
Membuat ID tugas dan klaim ID kendaraan pengiriman
Untuk melacak kendaraan pengiriman menggunakan penyedia lokasi kendaraan pengiriman, buat JSON Web Token (JWT) dengan ID tugas dan klaim ID kendaraan pengiriman.
Untuk membuat payload JWT, tambahkan klaim tambahan di bagian otorisasi dengan kunci taskid dan deliveryvehicleid, lalu tetapkan nilai setiap kunci ke *. Token harus dibuat menggunakan peran Cloud IAM Fleet Engine Service Service. Perhatikan bahwa hal ini memberikan akses luas untuk membuat, membaca, dan memodifikasi entity Fleet Engine, dan hanya boleh dibagikan kepada pengguna tepercaya.
Contoh berikut menunjukkan cara membuat token untuk pelacakan berdasarkan kendaraan dan tugas:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
"sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"taskid": "*",
"deliveryvehicleid": "*",
}
}
Membuat pengambil token autentikasi
Anda dapat membuat pengambil token autentikasi untuk mengambil token yang dibuat dengan klaim yang sesuai di server Anda menggunakan sertifikat akun layanan untuk project Anda. Penting untuk hanya membuat token di server dan jangan pernah membagikan sertifikat Anda ke klien mana pun. Jika tidak, Anda akan membahayakan keamanan sistem Anda.
Pengambil harus menampilkan struktur data dengan dua kolom, yang digabungkan dalam Promise:
- String
token
. - Angka
expiresInSeconds
. Masa berlaku token akan berakhir dalam waktu ini setelah pengambilan.
Library Pelacakan Armada JavaScript meminta token melalui pengambil token autentikasi jika salah satu hal berikut berlaku:
- Token tidak memiliki token yang valid, seperti saat pengambilan belum memanggil pengambil pada pemuatan halaman baru, atau saat pengambil belum ditampilkan dengan token.
- Token yang diambil sebelumnya telah habis masa berlakunya.
- Masa berlaku token yang diambil sebelumnya akan berakhir dalam satu menit.
Jika tidak, library akan menggunakan token yang dikeluarkan sebelumnya yang masih valid dan tidak memanggil pengambil.
Contoh berikut menunjukkan cara membuat pengambil token autentikasi:
JavaScript
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
TypeScript
function authTokenFetcher(options: {
serviceType: google.maps.journeySharing.FleetEngineServiceType,
context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
// The developer should generate the correct
// SERVER_TOKEN_URL based on options.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.token,
expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
};
}
Saat menerapkan endpoint sisi server untuk membuat token, perhatikan hal berikut:
- Endpoint harus menampilkan waktu habis masa berlaku untuk token; dalam contoh
di atas, ditentukan sebagai
data.ExpiresInSeconds
. - Pengambil token autentikasi harus meneruskan waktu habis masa berlaku (dalam detik, dari waktu pengambilan) ke library, seperti ditunjukkan pada contoh.
- SERVER_TOKEN_URL bergantung pada penerapan backend Anda, berikut adalah URL untuk backend aplikasi contoh:
- https://
SERVER_URL
/token/delivery_driver/DELIVERY_VEHICLE_ID
- https://
SERVER_URL
/token/delivery_consumer/TRACKING_ID
- https://
SERVER_URL
/token/fleet_reader
- https://
Memuat peta dari HTML
Contoh berikut menunjukkan cara memuat library Journey Journey
JavaScript dari URL tertentu. Parameter callback menjalankan fungsi initMap
setelah API dimuat. Atribut defer memungkinkan browser
terus merender bagian halaman lainnya saat API dimuat.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Mengikuti kendaraan pengiriman
Bagian ini menunjukkan cara menggunakan Library Pelacakan Armada JavaScript untuk mengikuti kendaraan pengiriman. Pastikan untuk memuat library dari fungsi callback yang ditentukan dalam tag skrip sebelum menjalankan kode Anda.
Membuat instance penyedia lokasi kendaraan pengiriman
Library Pelacakan Armada JavaScript menentukan penyedia lokasi untuk Fleet Engine Deliveries API. Gunakan project ID Anda dan referensi ke factory token untuk membuat instance.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
Melakukan inisialisasi tampilan peta
Setelah memuat library Perjalanan Perjalanan JavaScript, lakukan inisialisasi tampilan peta, lalu tambahkan ke halaman HTML. Halaman Anda harus berisi elemen <div> yang menyimpan tampilan peta. Elemen <div> diberi nama map_canvas dalam contoh di bawah ini.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Memproses peristiwa perubahan
Anda dapat mengambil informasi meta tentang tugas dari objek deliveryVehicle
menggunakan penyedia lokasi. Informasi meta mencakup PWT dan
jarak yang tersisa sebelum penjemputan atau pengantaran kendaraan berikutnya. Perubahan
pada informasi meta akan memicu peristiwa update. Contoh berikut menunjukkan cara memproses peristiwa perubahan ini.
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
Memproses error
Error yang muncul secara asinkron saat meminta informasi kendaraan pengiriman akan memicu peristiwa error. Contoh berikut menunjukkan cara memproses peristiwa ini untuk menangani error.
JavaScript
locationProvider.addListener('error', e => {
// e.error is the error that triggered the event.
console.error(e.error);
});
TypeScript
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error is the error that triggered the event.
console.error(e.error);
});
Hentikan pelacakan
Untuk menghentikan penyedia lokasi melacak kendaraan pengiriman, hapus ID kendaraan pengiriman dari penyedia lokasi.
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
Menghapus penyedia lokasi dari tampilan peta
Contoh berikut menampilkan cara menghapus penyedia lokasi dari tampilan peta.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Melihat perangkat pengiriman
Bagian ini menunjukkan cara menggunakan library Perjalanan Perjalanan JavaScript untuk melihat fleet pengiriman. Pastikan untuk memuat library dari fungsi callback yang ditentukan dalam tag skrip sebelum menjalankan kode Anda.
Membuat instance penyedia lokasi perangkat pengiriman
Library Pelacakan Armada JavaScript menentukan penyedia lokasi yang mengambil beberapa kendaraan dari FleetEngine Deliveries API. Gunakan project ID Anda serta referensi ke pengambil token untuk membuat instance.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleFilter
menentukan kueri yang digunakan untuk memfilter kendaraan yang ditampilkan di
peta. Filter ini diteruskan langsung ke Fleet Engine. Lihat
ListDeliveryVehiclesRequest.filter
untuk mengetahui format yang didukung.
locationRestriction
membatasi area untuk menampilkan kendaraan di peta.
Setelan ini juga mengontrol apakah pelacakan lokasi aktif atau tidak. Pelacakan lokasi
tidak akan dimulai sampai pelacakan ini ditetapkan.
Setelah penyedia lokasi dibuat, lakukan inisialisasi tampilan peta.
Menetapkan pembatasan lokasi menggunakan area pandang peta
Batas locationRestriction
dapat dikonfigurasi agar cocok dengan area yang saat ini terlihat dalam tampilan peta.
JavaScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
TypeScript
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
Memproses peristiwa perubahan
Anda dapat mengambil informasi meta tentang fleet dari objek deliveryVehicles
menggunakan penyedia lokasi. Informasi meta mencakup properti kendaraan seperti status navigasi, jarak yang tersisa, dan atribut khusus; lihat dokumentasi referensi untuk mengetahui detail selengkapnya. Perubahan ke informasi meta akan memicu peristiwa update. Contoh berikut menunjukkan cara memproses peristiwa perubahan ini.
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
// e.deliveryVehicles contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicles) {
for (vehicle of e.deliveryVehicles) {
console.log(vehicle.remainingDistanceMeters);
}
}
});
Memproses error
Error yang muncul secara asinkron saat meminta informasi fleet pengiriman dapat memicu peristiwa error. Untuk mengetahui contoh cara memproses peristiwa ini, lihat Memproses error.
Hentikan pelacakan
Untuk menghentikan penyedia lokasi melacak fleet pengiriman, tetapkan batas penyedia lokasi ke null.
JavaScript
locationProvider.locationRestriction = null;
TypeScript
locationProvider.locationRestriction = null;
Menghapus penyedia lokasi dari tampilan peta
Contoh berikut menampilkan cara menghapus penyedia lokasi dari tampilan peta.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Lacak kendaraan pengiriman saat melihat armada pengiriman
Saat melihat armada, Anda dapat menampilkan rute dan tugas mendatang untuk kendaraan pengiriman tertentu. Untuk melakukannya, buat instance Penyedia Lokasi Delivery Fleet dan Penyedia Lokasi Kendaraan Pengiriman, lalu tambahkan keduanya ke tampilan peta:
JavaScript
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
TypeScript
deliveryFleetLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which delivery vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which delivery vehicles are retrieved.
deliveryVehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
deliveryVehicleLocationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher
});
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [
deliveryFleetLocationProvider,
deliveryVehicleLocationProvider,
],
// Any other options
});
Penyedia lokasi armada pengiriman mulai menampilkan kendaraan pengiriman di peta. Gunakan penyesuaian penanda untuk memungkinkan penyedia lokasi kendaraan pengiriman melacak kendaraan pengiriman saat penanda armadanya diklik:
JavaScript
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
TypeScript
// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
(params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// params.vehicle.name follows the format
// "providers/{provider}/deliveryVehicles/{vehicleId}".
// Only the vehicleId portion is used for the delivery vehicle
// location provider.
deliveryVehicleLocationProvider.deliveryVehicleId =
params.vehicle.name.split('/').pop();
});
}
};
Menyembunyikan penanda dari penyedia lokasi kendaraan pengiriman untuk mencegah rendering dua penanda untuk kendaraan yang sama:
JavaScript
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};
TypeScript
// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
(params: deliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.setVisible(false);
}
};
Menyesuaikan tampilan dan nuansa peta dasar
Untuk menyesuaikan tampilan dan nuansa komponen peta, tata gaya peta Anda menggunakan alat berbasis cloud atau dengan menetapkan opsi secara langsung dalam kode.
Menggunakan gaya visual peta berbasis cloud
Gaya visual peta berbasis Cloud memungkinkan Anda membuat dan mengedit gaya peta untuk setiap aplikasi yang menggunakan Google Maps dari Konsol Google Cloud tanpa memerlukan perubahan pada kode.
Gaya peta disimpan sebagai ID peta di project Cloud Anda. Untuk
menerapkan gaya ke peta Pelacakan Fleet JavaScript, tentukan
mapId
saat Anda membuat JourneySharingMapView
. Kolom mapId
tidak dapat diubah
atau ditambahkan setelah JourneySharingMapView
dibuat instance-nya. Contoh berikut menunjukkan cara mengaktifkan gaya peta yang telah dibuat sebelumnya dengan ID peta.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
Menggunakan gaya visual peta berbasis kode
Cara lain untuk menyesuaikan gaya visual peta adalah dengan menetapkan mapOptions
saat Anda membuat JourneySharingMapView
.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
Menggunakan penyesuaian penanda
Dengan Library Pelacakan Armada JavaScript, Anda dapat menyesuaikan tampilan dan nuansa penanda yang ditambahkan ke peta. Anda melakukannya dengan menentukan penyesuaian penanda, yang kemudian akan diterapkan oleh Fleet Tracking Library sebelum menambahkan penanda ke peta dan dengan setiap pembaruan penanda.
Penyesuaian yang paling sederhana adalah dengan menentukan objek MarkerOptions
yang akan diterapkan ke semua penanda dari jenis yang sama. Perubahan yang ditentukan dalam objek akan diterapkan setelah setiap penanda dibuat, yang menimpa opsi default apa pun.
Opsi yang lebih canggih adalah menentukan fungsi penyesuaian. Fungsi penyesuaian memungkinkan penataan gaya penanda berdasarkan data, serta menambahkan interaktivitas ke penanda, seperti penanganan klik. Secara khusus, Fleet Tracking meneruskan data ke fungsi penyesuaian tentang jenis objek yang diwakili penanda: kendaraan, perhentian, atau tugas. Hal ini kemudian memungkinkan gaya visual penanda berubah berdasarkan status elemen penanda saat ini; misalnya, jumlah perhentian atau jenis tugas yang tersisa. Anda bahkan dapat menggabungkan data dari sumber di luar Fleet Engine dan menata gaya penanda berdasarkan informasi tersebut.
Selain itu, Anda dapat menggunakan fungsi penyesuaian untuk memfilter visibilitas penanda.
Untuk melakukannya, panggil
setVisible(false)
pada penanda.
Namun, karena alasan performa, sebaiknya filter dengan pemfilteran
native di penyedia lokasi, seperti
FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
.
Meskipun demikian, saat memerlukan fungsi pemfilteran tambahan, Anda dapat menerapkan
pemfilteran menggunakan fungsi penyesuaian.
Library Pelacakan Fleet menyediakan parameter penyesuaian berikut:
Mengubah gaya penanda menggunakan MarkerOptions
Contoh berikut menunjukkan cara mengonfigurasi gaya penanda kendaraan dengan objek MarkerOptions
. Ikuti pola ini untuk menyesuaikan gaya penanda menggunakan salah satu parameter penyesuaian penanda yang tercantum di atas.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Mengubah gaya visual penanda menggunakan fungsi penyesuaian
Contoh berikut menunjukkan cara mengonfigurasi gaya penanda kendaraan. Ikuti pola ini untuk menyesuaikan gaya visual penanda menggunakan salah satu parameter penyesuaian penanda yang tercantum di atas.
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 parameter penyesuaian penanda yang tercantum di atas.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Memfilter penanda yang terlihat
Contoh berikut menunjukkan cara memfilter penanda kendaraan yang terlihat. Ikuti pola ini untuk memfilter penanda menggunakan salah satu parameter penyesuaian penanda yang tercantum di atas.
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);
}
};
Gunakan penyesuaian polyline saat mengikuti kendaraan pengiriman
Dengan JavaScript Fleet Tracking Library, Anda juga dapat menyesuaikan tampilan dan
nuansa rute kendaraan yang diikuti pada peta. Library ini membuat objek google.maps.Polyline
untuk setiap pasangan koordinat dalam jalur kendaraan yang aktif atau tersisa.
Anda dapat menata gaya objek Polyline
dengan menentukan penyesuaian polyline. Selanjutnya,
library akan menerapkan penyesuaian ini dalam dua situasi: sebelum menambahkan
objek ke peta, dan saat data yang digunakan untuk objek telah berubah.
Serupa dengan penyesuaian penanda, Anda dapat menentukan kumpulan
PolylineOptions
untuk diterapkan ke semua objek Polyline
yang cocok saat
dibuat atau diupdate.
Demikian pula, Anda dapat menentukan fungsi penyesuaian. Fungsi penyesuaian
memungkinkan gaya individual objek berdasarkan data yang dikirim oleh Fleet Engine.
Fungsi ini dapat mengubah gaya visual setiap objek berdasarkan status kendaraan
saat ini; misalnya, mewarnai objek Polyline
dengan tempat yang lebih dalam, atau membuatnya
lebih tebal saat kendaraan bergerak lebih lambat. Anda bahkan dapat bergabung dengan
sumber di luar Fleet Engine dan menata gaya objek Polyline
berdasarkan
informasi tersebut.
Anda dapat menentukan penyesuaian menggunakan parameter yang diberikan di
FleetEngineDeliveryVehicleLocationProviderOptions
.
Anda dapat menetapkan penyesuaian untuk berbagai status jalur dalam perjalanan
kendaraan--sudah ditempuh, aktif bepergian, atau belum ditempuh. Parameternya adalah sebagai berikut:
takenPolylineCustomization
, untuk jalur yang telah ditempuh;activePolylineCustomization
, untuk jalur perjalanan yang aktif;remainingPolylineCustomization
, untuk jalur yang belum ditempuh.
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 yang tercantum sebelumnya.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Mengubah gaya visual objek Polyline
menggunakan fungsi penyesuaian
Contoh berikut menunjukkan cara mengonfigurasi gaya visual untuk objek Polyline yang aktif menggunakan fungsi penyesuaian. Ikuti pola ini untuk menyesuaikan gaya objek Polyline
menggunakan salah satu parameter penyesuaian polyline yang tercantum sebelumnya.
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'});
}
}
};
Mengontrol visibilitas objek Polyline
Secara default, semua objek Polyline
terlihat. Untuk membuat objek Polyline
tidak terlihat, tetapkan properti visible
-nya:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Menampilkan InfoWindow
untuk penanda lokasi atau kendaraan
Anda dapat menggunakan InfoWindow
untuk menampilkan informasi tambahan tentang kendaraan atau penanda lokasi.
Contoh berikut menunjukkan cara membuat InfoWindow
dan melampirkannya
ke penanda kendaraan.
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();
Nonaktifkan pengepasan otomatis
Anda dapat menghentikan peta agar tidak otomatis menyesuaikan area tampilan dengan kendaraan dan rute yang diharapkan dengan menonaktifkan pemasangan otomatis. Contoh berikut menunjukkan cara menonaktifkan pemasangan otomatis saat Anda mengonfigurasi tampilan peta berbagi perjalanan.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
Mengganti peta yang ada
Anda dapat mengganti peta yang ada yang menyertakan penanda atau penyesuaian lainnya tanpa kehilangan penyesuaian tersebut.
Misalnya, Anda memiliki halaman web dengan entitas google.maps.Map
standar tempat penanda ditampilkan:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, initially centered at Mountain View, CA.
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The async attribute allows the browser to render the page while the API loads.
* The key parameter will contain your own API key (which is not needed for this tutorial).
* The callback parameter executes the initMap() function.
-->
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Untuk menambahkan library Journey Journey JavaScript, yang menyertakan Fleet Tracking:
- Tambahkan kode untuk factory token autentikasi.
- Lakukan inisialisasi penyedia lokasi di fungsi
initMap()
. - Lakukan inisialisasi tampilan peta dalam fungsi
initMap()
. Tampilan berisi peta. - Pindahkan penyesuaian Anda ke dalam fungsi callback untuk inisialisasi tampilan peta.
- Tambahkan library lokasi ke loader API.
Contoh berikut menunjukkan perubahan yang akan dilakukan:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
let locationProvider;
// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
// Initialize and add the map
function initMap() {
// (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
YOUR_PROVIDER_ID,
authTokenFetcher,
});
// (3) Initialize map view (which contains the map).
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map'),
locationProviders: [locationProvider],
// any styling options
});
mapView.addListener('ready', () => {
locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;
// (4) Add customizations like before.
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, initially centered at Mountain View, CA.
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
};
}
</script>
<!-- Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
*
* (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
Jika Anda mengoperasikan kendaraan pengiriman dengan ID yang ditentukan di dekat Uluru, kendaraan tersebut kini akan dirender di peta.