Library Pelacakan Pengiriman JavaScript memungkinkan Anda memvisualisasi lokasi
kendaraan dan lokasi minat yang dilacak di Fleet Engine. Library
berisi komponen peta JavaScript yang merupakan pengganti langsung
untuk entity google.maps.Map
standar dan komponen data agar dapat terhubung
dengan Fleet Engine. Dengan menggunakan Library Pelacakan Pengiriman JavaScript, Anda dapat memberikan animasi pengalaman pelacakan pengiriman yang dapat disesuaikan dari aplikasi web Anda.
Komponen
Library Pelacakan Pengiriman JavaScript menyediakan komponen untuk visualisasi kendaraan dan rute saat melaju ke tujuan, serta feed data mentah untuk PWT pengemudi atau jarak mengemudi yang tersisa.
Tampilan peta Pelacakan Pengiriman
Komponen tampilan peta memvisualisasikan lokasi kendaraan dan tujuan. Jika rute untuk kendaraan diketahui, komponen tampilan peta akan menganimasikan kendaraan tersebut saat melaju di sepanjang jalur yang diprediksi.
Penyedia lokasi pengiriman
Penyedia lokasi pengiriman memasukkan informasi lokasi untuk objek yang dilacak ke dalam peta pelacakan pengiriman untuk pelacakan pengiriman kilometer pertama dan terakhir.
Anda dapat menggunakan penyedia lokasi pengiriman untuk melacak:
- Lokasi pengambilan atau pengiriman paket.
- Lokasi dan rute kendaraan pengiriman.
Objek lokasi yang dilacak
Penyedia lokasi melacak lokasi objek seperti kendaraan dan tujuan.
Lokasi tujuan
Lokasi tujuan adalah lokasi tempat perjalanan berakhir. Untuk pelacakan pengiriman, ini adalah lokasi tugas yang direncanakan.
Lokasi kendaraan
Lokasi kendaraan adalah lokasi kendaraan yang dilacak. Opsional juga dapat menyertakan rute untuk kendaraan.
Pengambil token autentikasi
Untuk mengontrol akses ke data lokasi yang disimpan di Fleet Engine, Anda harus mengimplementasikan layanan pembuatan Token Web JSON (JWT) untuk Fleet Engine di server Anda. Kemudian, terapkan pengambil token autentikasi sebagai bagian dari aplikasi web Anda, menggunakan Library Berbagi Perjalanan JavaScript untuk mengautentikasi akses ke data lokasi.
Opsi gaya visual
Gaya penanda dan polyline menentukan tampilan dan nuansa objek lokasi yang dilacak pada peta. Anda dapat menggunakan opsi gaya visual kustom untuk mengubah gaya default agar cocok dengan gaya visual aplikasi web Anda.
Mengontrol visibilitas lokasi yang dilacak
Bagian ini menjelaskan kontrol visibilitas untuk objek yang dilacak di peta. Aturan-aturan ini berlaku untuk dua kategori objek:
- Penanda lokasi
- Data tugas
Visibilitas penanda lokasi
Semua penanda lokasi untuk tempat asal dan tujuan selalu ditampilkan pada peta. Misalnya, lokasi pengiriman selalu ditampilkan di peta, terlepas dari status pengiriman.
Visibilitas data tugas
Bagian ini menjelaskan aturan visibilitas default yang berlaku untuk data tugas, seperti lokasi kendaraan dan rute yang tersisa. Anda dapat menyesuaikan banyak tugas, tetapi tidak semuanya:
- Tugas ketidaktersediaan -- Anda tidak dapat menyesuaikan visibilitas untuk tugas ini.
- Tugas kendaraan aktif -- Anda dapat menyesuaikan jenis tugas ini.
- Tugas kendaraan tidak aktif -- Anda tidak dapat menyesuaikan visibilitas untuk tugas ini.
Tugas ketidaktersediaan
Jika setidaknya ada satu tugas ketidaktersediaan (misalnya, jika pengemudi beristirahat atau kendaraan sedang mengisi bahan bakar) pada rute ke tugas yang dilacak, kendaraan tidak akan terlihat. Perkiraan waktu kedatangan dan perkiraan waktu penyelesaian tugas masih tersedia.
Tugas kendaraan aktif
Objek TaskTrackingInfo
menyediakan sejumlah elemen data yang dapat terlihat dalam Library Pelacakan Pengiriman. Secara default, kolom ini terlihat saat tugas
ditetapkan ke kendaraan dan saat kendaraan berada dalam jarak 5 perhentian dari tugas. visibilitas berakhir saat tugas diselesaikan atau dibatalkan. Kolom-kolomnya adalah
sebagai berikut:
- Merutekan polyline
- Perkiraan waktu tiba
- Perkiraan waktu penyelesaian tugas
- Jarak mengemudi lainnya ke tugas
- Jumlah perhentian tersisa
- Lokasi kendaraan
Anda dapat menyesuaikan konfigurasi visibilitas per tugas dengan menetapkan
TaskTrackingViewConfig
pada tugas saat membuat atau mengupdate tugas dalam Fleet Engine. Opsi ini membuat aturan mengenai kapan setiap elemen data tersedia, yang dapat didasarkan pada kriteria berikut (disebut sebagai opsi visibilitas di bawah):
- Jumlah perhentian tersisa
- Durasi hingga perkiraan waktu kedatangan
- Jarak mengemudi tersisa
- Selalu terlihat
- Tidak pernah terlihat
Perhatikan bahwa setiap elemen data hanya dapat dikaitkan dengan satu opsi visibilitas. Kriteria tidak dapat digabungkan menggunakan ATAU atau DAN.
Contoh penyesuaian adalah sebagai berikut. Aturan penyesuaian tersebut adalah:
- Tampilkan polyline rute jika kendaraan berada dalam 3 perhentian.
- Menampilkan PWT jika jarak mengemudi yang tersisa lebih pendek dari 5.000 meter.
- Jangan pernah menampilkan jumlah perhentian yang tersisa.
- Satu kolom lainnya mempertahankan visibilitas default untuk ditampilkan saat kendaraan berada dalam jarak 5 perhentian dari tugas.
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Anda juga dapat menyesuaikan konfigurasi visibilitas default untuk project Anda dengan menghubungi tim dukungan.
Polyline rute dan aturan visibilitas lokasi kendaraan:
Jika polyline rute terlihat, lokasi kendaraan juga harus terlihat. Jika tidak, lokasi kendaraan dapat ditunjukkan dengan akhir polyline. Artinya, polyline rute tidak boleh memiliki opsi visibilitas yang tidak terlalu membatasi.
Aturan ini harus diikuti untuk memberikan kombinasi polyline rute / visibilitas lokasi kendaraan yang valid:
Jika polyline rute dan lokasi kendaraan memiliki jenis opsi visibilitas yang sama:
- Jika opsi visibilitas adalah jumlah perhentian yang tersisa, durasi hingga PWT, atau jarak mengemudi tersisa, polyline rute harus memberikan nilai yang kurang dari atau sama dengan nilai yang ditetapkan untuk opsi visibilitas ini untuk lokasi kendaraan. Contohnya sebagai berikut:
"taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, }
- Jika polyline rute memiliki opsi visibilitas yang selalu terlihat, lokasi kendaraan juga harus memberikan opsi visibilitas yang selalu terlihat.
- Jika lokasi kendaraan memiliki opsi visibilitas yang tidak pernah terlihat, polyline rute juga harus memberikan opsi visibilitas yang tidak pernah terlihat.
Jika polyline rute dan lokasi kendaraan memiliki jenis opsi visibilitas yang berbeda, lokasi kendaraan hanya akan terlihat jika kedua opsi visibilitasnya terpenuhi.
Contohnya sebagai berikut:
"taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, }
Dalam contoh ini, lokasi kendaraan hanya terlihat jika jumlah perhentian yang tersisa minimal 3 DAN jarak mengemudi yang tersisa minimal 3.000 meter.
Mulai menggunakan Library Berbagi Perjalanan JavaScript
Sebelum menggunakan Library Berbagi Perjalanan JavaScript, pastikan Anda telah memahami Fleet Engine dan cara mendapatkan kunci API.
Untuk melacak pengiriman, buat klaim ID pelacakan terlebih dahulu.
Membuat klaim ID pelacakan
Untuk melacak pengiriman menggunakan penyedia lokasi pengiriman, buat JSON Web Token (JWT) dengan klaim ID pelacakan.
Untuk membuat payload JWT, tambahkan klaim tambahan di bagian otorisasi dengan kunci trackingid. Tetapkan nilainya ke ID pelacakan pengiriman.
Contoh berikut menampilkan cara membuat token untuk pelacakan berdasarkan ID pelacakan:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
"sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"trackingid": "tid_54321",
}
}
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, keamanan sistem Anda akan disusupi.
Pengambil harus menampilkan struktur data dengan dua kolom, yang digabungkan dalam Promise:
- String
token
. - Nomor
expiresInSeconds
. Masa berlaku token akan berakhir dalam waktu ini setelah diambil.
Library Pelacakan Pengiriman JavaScript meminta token melalui pengambil token autentikasi jika salah satu kondisi berikut terpenuhi:
- Fragmen ini tidak memiliki token yang valid, seperti jika pengambil belum memanggil pengambil pada pemuatan halaman baru, atau saat pengambil belum menampilkan token.
- Masa berlaku token yang diambil sebelumnya telah berakhir.
- Masa berlaku token yang diambil sebelumnya akan berakhir dalam waktu satu menit.
Jika tidak, library akan menggunakan token yang diterbitkan sebelumnya dan masih valid, serta 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 pembuatan token, perhatikan hal berikut:
- Endpoint harus menampilkan waktu habis masa berlaku untuk token; dalam contoh
di atas, endpoint diberikan sebagai
data.ExpiresInSeconds
. - Pengambil token autentikasi harus meneruskan waktu masa berakhir (dalam detik, dari waktu pengambilan) ke library, seperti yang ditunjukkan dalam contoh.
- SERVER_TOKEN_URL bergantung pada implementasi 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 Pelacakan Pengiriman JavaScript dari URL yang ditentukan. Parameter callback mengeksekusi fungsi initMap
setelah API dimuat. Atribut defer memungkinkan browser
terus merender sisa halaman Anda saat API dimuat.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Mengikuti pengiriman
Bagian ini menunjukkan cara menggunakan Library Pelacakan Pengiriman JavaScript untuk mengikuti pengambilan atau pengantaran kiriman. Pastikan untuk memuat library dari fungsi callback yang ditentukan dalam tag skrip sebelum menjalankan kode Anda.
Membuat instance penyedia lokasi pengiriman
Library Pelacakan Pengiriman JavaScript menentukan penyedia lokasi terlebih dahulu untuk Fleet Engine Deliveries API. Gunakan project ID dan referensi ke factory token Anda untuk membuat instance.
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify tracking ID to
// immediately start tracking.
trackingId: 'your-tracking-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify tracking ID to
// immediately start tracking.
trackingId: 'your-tracking-id',
});
Melakukan inisialisasi tampilan peta
Setelah memuat library Berbagi Perjalanan JavaScript, lakukan inisialisasi tampilan peta dan tambahkan ke halaman HTML. Halaman Anda harus berisi elemen <div> yang menyimpan tampilan peta. Pada contoh berikut, elemen <div> diberi nama map_canvas.
Untuk menghindari kondisi race, tetapkan ID pelacakan untuk penyedia lokasi dalam callback yang dipanggil setelah peta diinisialisasi.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
document.getElementById('map_canvas'),
locationProviders: [locationProvider],
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
ID Pelacakan
ID pelacakan yang diberikan ke penyedia lokasi dapat sesuai dengan beberapa tugas; misalnya, tugas pengambilan dan pengiriman untuk paket yang sama, atau beberapa upaya pengiriman yang gagal. Satu tugas dipilih untuk ditampilkan di peta pelacakan pengiriman. Tugas yang akan ditampilkan ditentukan sebagai berikut:
- Jika hanya ada satu tugas pengambilan yang terbuka, tugas tersebut akan ditampilkan. Error akan muncul jika ada beberapa tugas pengambilan yang terbuka.
- Jika hanya ada satu tugas pengiriman yang terbuka, tugas tersebut akan ditampilkan. Error akan dibuat jika ada beberapa tugas pengiriman yang terbuka.
- Jika ada tugas pengiriman yang ditutup:
- Jika hanya ada satu tugas pengiriman yang ditutup, tugas tersebut akan ditampilkan.
- Jika ada beberapa tugas pengiriman tertutup, tugas dengan waktu hasil terbaru akan ditampilkan.
- Jika ada beberapa tugas pengiriman yang ditutup, dan tidak ada tugas yang memiliki waktu hasil, error akan muncul.
- Jika ada tugas pengambilan yang ditutup:
- Jika hanya ada satu tugas pengambilan yang ditutup, tugas tersebut akan ditampilkan.
- Jika ada beberapa tugas pengambilan yang ditutup, tugas dengan waktu hasil terbaru akan ditampilkan.
- Jika ada beberapa tugas pengambilan yang ditutup, dan tidak ada tugas yang memiliki waktu hasil, error akan muncul.
- Jika tidak, tugas tidak akan ditampilkan.
Memproses peristiwa perubahan
Anda dapat mengambil informasi meta tentang tugas dari objek info pelacakan tugas menggunakan penyedia lokasi. Informasi meta mencakup PWT, jumlah perhentian yang tersisa, dan jarak yang tersisa sebelum penjemputan atau pengantaran. Perubahan pada informasi meta akan memicu peristiwa update. Contoh berikut menunjukkan cara memproses peristiwa perubahan ini.
JavaScript
locationProvider.addListener('update', e => {
// e.taskTrackingInfo contains data that may be useful
// to the rest of the UI.
console.log(e.taskTrackingInfo.remainingStopCount);
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
// e.taskTrackingInfo contains data that may be useful
// to the rest of the UI.
console.log(e.taskTrackingInfo.remainingStopCount);
});
Menangani error
Error yang muncul secara asinkron saat meminta informasi 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);
});
Catatan: Pastikan untuk menggabungkan panggilan library dalam blok try...catch
untuk menangani error yang tidak terduga.
Hentikan pelacakan
Untuk menghentikan penyedia lokasi melacak pengiriman, hapus ID pelacakan dari penyedia lokasi.
JavaScript
locationProvider.trackingId = '';
TypeScript
locationProvider.trackingId = '';
Menghapus penyedia lokasi dari tampilan peta
Contoh berikut menampilkan cara menghapus penyedia lokasi dari tampilan peta.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
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 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 Pengiriman 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 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'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
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 Pengiriman JavaScript, Anda dapat menyesuaikan tampilan dan nuansa penanda yang ditambahkan ke peta. Anda melakukannya dengan menentukan penyesuaian penanda, yang kemudian diterapkan oleh Shipment Tracking Library sebelum menambahkan penanda ke peta dan setiap pembaruan penanda.
Penyesuaian yang paling sederhana adalah menentukan
objek MarkerOptions
yang akan diterapkan ke semua penanda dengan jenis yang sama. Perubahan yang ditentukan dalam objek diterapkan setelah setiap penanda dibuat, sehingga menimpa opsi default apa pun.
Opsi lanjutan lainnya adalah menentukan fungsi penyesuaian. Fungsi penyesuaian memungkinkan penataan gaya penanda berdasarkan data, serta menambahkan interaktivitas ke penanda, seperti penanganan klik. Secara khusus, Pelacakan Pengiriman meneruskan data ke fungsi penyesuaian tentang jenis objek yang direpresentasikan oleh penanda: kendaraan atau tujuan. Hal ini memungkinkan gaya visual penanda berubah berdasarkan status elemen penanda itu sendiri saat ini; misalnya, jumlah rencana perhentian yang tersisa hingga tujuan. Anda bahkan dapat menggabungkan data dari sumber di luar Fleet Engine dan memberi gaya penanda berdasarkan informasi tersebut.
Library Pelacakan Pengiriman menyediakan parameter penyesuaian berikut di
FleetEngineShipmentLocationProviderOptions
:
Ubah gaya visual penanda menggunakan MarkerOptions
Contoh berikut menunjukkan cara mengonfigurasi gaya visual penanda kendaraan dengan objek MarkerOptions
. Ikuti pola ini untuk menyesuaikan gaya visual penanda menggunakan salah satu 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 visual 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.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
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 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: ShipmentMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Menggunakan penyesuaian polyline
Dengan Shipment Tracking Library, Anda juga dapat menyesuaikan tampilan dan nuansa
rute pengiriman di peta. Library membuat
objek google.maps.Polyline
untuk setiap pasangan koordinat di jalur
pengiriman 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
yang akan diterapkan ke semua objek Polyline
yang cocok saat objek tersebut dibuat
atau diupdate.
Demikian pula, Anda dapat menentukan fungsi penyesuaian. Fungsi penyesuaian
memungkinkan penataan gaya individu pada objek berdasarkan data yang dikirim oleh Fleet Engine.
Fungsi ini dapat mengubah gaya visual setiap objek berdasarkan status pengiriman saat ini; misalnya, mewarnai objek Polyline
dengan warna yang lebih dalam, atau membuatnya lebih tebal saat kendaraan melaju 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 disediakan di FleetEngineShipmentLocationProviderOptions
.
Anda dapat menetapkan penyesuaian untuk berbagai status jalur dalam perjalanan
kendaraan, yang sudah dilalui, bepergian, atau belum dilalui. Parameternya adalah sebagai berikut:
takenPolylineCustomization
, untuk jalur yang sudah dilalui;activePolylineCustomization
, untuk jalur yang aktif berjalan;remainingPolylineCustomization
, untuk jalur yang belum dilalui.
Ubah gaya visual 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',
};
Ubah gaya visual objek Polyline
menggunakan fungsi penyesuaian
Contoh berikut menunjukkan cara mengonfigurasi gaya visual objek Polyline
yang aktif. Ikuti pola ini untuk menyesuaikan gaya visual 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.taskTrackingInfo.remainingDrivingDistanceMeters;
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: ShipmentPolylineCustomizationFunctionParams) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
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
:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Menampilkan InfoWindow
untuk penanda lokasi atau kendaraan
Anda dapat menggunakan InfoWindow
untuk menampilkan informasi tambahan tentang penanda lokasi atau kendaraan.
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});
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();
Nonaktifkan penyesuaian otomatis
Anda dapat menghentikan peta agar tidak otomatis menyesuaikan area pandang ke kendaraan dan rute yang diantisipasi dengan menonaktifkan pencocokan otomatis. Contoh berikut menunjukkan cara menonaktifkan penyesuaian otomatis saat Anda mengonfigurasi tampilan peta untuk berbagi perjalanan.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
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();
Mengganti peta yang ada
Anda dapat menggunakan Library Pelacakan Pengiriman JavaScript untuk mengganti peta yang ada yang menyertakan penanda atau penyesuaian lainnya tanpa kehilangan penyesuaian tersebut.
Misalnya, Anda memiliki halaman web dengan entity 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 Berbagi Perjalanan JavaScript:
- Tambahkan kode untuk factory token autentikasi.
- Lakukan inisialisasi penyedia lokasi dalam fungsi
initMap()
. - Lakukan inisialisasi tampilan peta dalam fungsi
initMap()
. Tampilannya berisi peta. - Pindahkan penyesuaian 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.
locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
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
});
locationProvider.trackingId = TRACKING_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.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
Jika Anda memiliki paket yang dilacak dengan ID yang ditentukan di dekat Uluru, paket tersebut kini akan dirender pada peta.