Setelah menyiapkan JavaScript Consumer SDK untuk tugas terjadwal, Anda siap mengikuti pengiriman dengan aplikasi konsumen Anda. Dokumen ini mencakup langkah-langkah utama berikut dalam proses ini:
- Melakukan inisialisasi peta dan menampilkan perjalanan bersama
- Perbarui dan ikuti progres perjalanan
- Hentikan berbagi perjalanan
- Menangani error
Siapkan peta
Untuk mengikuti pengambilan atau pengiriman pengiriman di aplikasi web, Anda harus memuat peta dan buat instance Consumer SDK untuk mulai melacak pengiriman Anda. Anda dapat memuat menggunakan peta baru atau menggunakan yang sudah ada. Anda kemudian menggunakan inisialisasi untuk membuat instance Consumer SDK sehingga tampilan peta sesuai dengan lokasi item yang sedang dilacak.
Memuat peta baru menggunakan Google Maps JavaScript API
Untuk membuat peta baru, muat Google Maps JavaScript API di aplikasi web Anda. Tujuan contoh berikut menunjukkan cara memuat Google Maps JavaScript API, mengaktifkan SDK, dan memicu pemeriksaan inisialisasi.
- Parameter
callback
menjalankan fungsiinitMap
setelah API dimuat. - Atribut
defer
memungkinkan browser terus merender sisa halaman saat API dimuat.
Gunakan fungsi initMap
untuk membuat instance Consumer SDK. Contoh:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Memuat peta yang ada
Anda juga dapat memuat peta yang sudah ada yang dibuat dengan Google Maps JavaScript API, seperti yang sudah Anda gunakan.
Misalnya, Anda memiliki halaman web dengan google.maps.Map
standar
entitas tempat penanda ditampilkan seperti yang didefinisikan dalam kode HTML berikut. Ini
menampilkan peta Anda menggunakan fungsi initMap
yang sama dalam callback di bagian akhir:
<!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 Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// 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 Pier 39
var marker = new google.maps.Marker({position: pier39, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The defer attribute allows the browser to render the page while the API loads.
* The key parameter contains your own API key.
* 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>
Membuat instance penyedia lokasi pengiriman
Gunakan penyedia lokasi pengiriman, bersama dengan token otorisasi pengambil yang Anda tentukan sebelumnya, untuk mulai menerima data dari Fleet Engine.
Contoh ini menunjukkan cara membuat instance penyedia lokasi.
JavaScript
const locationProvider =
new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the fetcher defined previously
});
TypeScript
const locationProvider =
new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the fetcher defined previously
});
Menampilkan perjalanan bersama
Agar peta dapat menampilkan perjalanan bersama, Anda perlu menginisialisasi , yang menyetel bingkai untuk peta itu sendiri agar sesuai dengan lokasi perjalanan yang dilacak yang disediakan oleh Consumer SDK setelah mendapatkan informasi dari Fleet Engine.
Tips:
Pastikan halaman Anda berisi elemen <div> yang menyimpan tampilan peta. Pada contoh berikut, elemen <div> diberi nama
map_canvas
.Perhatikan aturan visibilitas default yang diterapkan Fleet Engine pada perjalanan Anda. Anda juga dapat mengonfigurasi aturan visibilitas untuk kendaraan yang aktif pengiriman dan tugas penghentian terjadwal. Lihat Menyesuaikan visibilitas tugas di Panduan Mengonfigurasi tugas.
Contoh ini menunjukkan cara melakukan inisialisasi tampilan peta.
JavaScript
function initMap() {
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
// Any undefined styling options use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking starts 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
function initMap() {
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
// 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 starts 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);
}
Memperbarui progres pengiriman
Anda dapat memproses peristiwa dan memperbarui progres pengiriman sebagai perjalanan
progresnya. Gunakan penyedia lokasi untuk mengambil informasi meta dari
Objek taskTrackingInfo
. Perubahan pada meta
informasi memicu peristiwa update. Objek taskTrackingInfo
menyediakan
hal berikut:
- PWT
- Jumlah perhentian yang tersisa
- Jarak yang tersisa sebelum pengambilan atau pengiriman
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);
});
Tampilkan kriteria untuk beberapa tugas
Consumer SDK untuk tugas terjadwal hanya menampilkan satu tugas per ID pelacakan pada di peta. Namun, Anda biasanya juga menetapkan satu ID pelacakan ke ID barang pengiriman yang tetap terkait dengan barang tersebut di sepanjang perjalanannya dalam sistem Anda. Artinya, satu ID pelacakan dapat dikaitkan dengan beberapa tugas, seperti tugas pengambilan diikuti dengan tugas pengiriman untuk paket, atau beberapa tugas pengiriman yang gagal untuk sebuah paket.
Untuk menangani situasi ini, Fleet Engine menerapkan kriteria untuk menampilkan tugas, yang ditunjukkan dalam tabel berikut.
Kriteria tugas | Hasil |
---|---|
Membuka tugas pengambilan | |
Hanya ada satu | Menampilkan tugas |
Ada beberapa | Buat error |
Tugas pengambilan yang ditutup | |
Hanya ada satu | Menampilkan tugas |
Ada beberapa (beberapa dengan waktu hasil) | Tampilkan tugas dengan waktu hasil terbaru |
Ada beberapa (tidak ada dengan waktu hasil) | Buat error |
Membuka tugas pengiriman | |
Hanya ada satu | Menampilkan tugas |
Ada beberapa | Buat error |
Tugas pengiriman yang ditutup | |
Hanya ada satu | Menampilkan tugas |
Ada beberapa (beberapa dengan waktu hasil) | Tampilkan tugas dengan waktu hasil terbaru |
Ada beberapa (tidak ada dengan waktu hasil) | Buat error |
Berhenti mengikuti pengiriman
Ketika perjalanan pengiriman selesai atau dibatalkan, aplikasi konsumen Anda harus mengakhiri berbagi perjalanan dengan menghapus ID pelacakan dan penyedia lokasi dari tampilan peta.
Menghapus ID pelacakan
Untuk menghentikan penyedia lokasi melacak pengiriman, hapus ID pelacakan dari penyedia lokasi. Contoh berikut menunjukkan cara melakukannya.
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);
Menangani error pelacakan pengiriman
Error yang muncul secara asinkron karena pemicu permintaan informasi pengiriman 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 tak terduga.