Lacak kendaraan

Bagian ini menunjukkan cara menggunakan library pelacakan fleet JavaScript untuk melacak untuk perjalanan on-demand atau tugas terjadwal.

Untuk melacak kendaraan, Anda melakukan langkah-langkah berikut:

  1. Memuat library dan melakukan inisialisasi tampilan peta
  2. Memberikan lokasi kendaraan dan tampilan peta
  3. Memproses peristiwa dan menangani error
  4. Menghentikan pelacakan

Memuat library dan melakukan inisialisasi tampilan peta

Untuk menampilkan operasi armada pada peta di halaman web Anda, gunakan skrip yang memanggil peta menggunakan kunci API Anda. Contoh berikut menunjukkan bagaimana untuk melakukannya dari HTML:

  • Sumber URL: Memanggil API Google Maps untuk meminta peta menggunakan kunci API Anda.

  • Parameter callback: Menjalankan fungsi initMap setelah API menampilkan panggilan.

  • Parameter libraries: Memuat library pelacakan Armada.

  • Atribut defer: Memungkinkan browser terus merender sisa atribut halaman saat API dimuat.

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

Memberikan lokasi kendaraan dan tampilan peta

Untuk mulai melacak kendaraan, Anda berdua membuat instance penyedia lokasi kendaraan dan lakukan inisialisasi tampilan peta dengan ID kendaraan seperti yang dijelaskan di bawah bagian.

Membuat instance penyedia lokasi kendaraan

Library pelacakan fleet JavaScript menyertakan penyedia lokasi untuk Armada API Engine. Menggunakan project ID dan referensi ke pengambil token untuk membuat instance seperti yang ditunjukkan dalam contoh berikut.

Perjalanan on-demand

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

Tugas terjadwal

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 Berbagi Perjalanan JavaScript, lakukan inisialisasi tampilan peta dan menambahkannya ke laman HTML. Halaman Anda harus berisi elemen &lt;div&gt; yang menyimpan tampilan peta. Elemen &lt;div&gt; diberi nama map_canvas dalam contoh berikut.=

Perjalanan on-demand

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-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 want.
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],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
                        = 'your-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Tugas terjadwal

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// 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 want.
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],
});

// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Memproses peristiwa dan menangani error

Setelah mulai melacak kendaraan, Anda ingin memperbarui progresnya di peta dan menangani kesalahan saat kendaraan melaju di sepanjang rutenya.

Memproses peristiwa kendaraan

Untuk melacak progres kendaraan untuk perjalanan on demand atau tugas terjadwal, Anda perlu memproses peristiwa perubahan.

Anda mengambil meta dari objek vehicle atau deliveryVehicle menggunakan Google Cloud Platform. Informasi meta mencakup PWT dan jarak yang tersisa sebelum penjemputan atau penurunan kendaraan berikutnya. Perubahan pada informasi meta memicu peristiwa update di penyedia lokasi.

Contoh berikut menunjukkan cara memproses peristiwa perubahan ini.

Perjalanan on-demand

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicle contains data that may be
  // useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  // e.vehicle contains data that may be
  // useful to the rest of the UI.
  if (e.vehicle) {
    console.log(e.vehicle.vehicleState);
  }
});

Tugas terjadwal

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);
  }
});

Menangani error

Setelah memuat library Berbagi Perjalanan JavaScript, lakukan inisialisasi tampilan peta dan menambahkannya ke laman HTML. Halaman Anda harus berisi elemen &lt;div&gt; yang menyimpan tampilan peta. Elemen &lt;div&gt; diberi nama map_canvas dalam contoh berikut.=

Perjalanan on-demand

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-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 want.
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],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
                        = 'your-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Tugas terjadwal

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// 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 want.
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],
});

// 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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Berhenti memantau kendaraan

Untuk berhenti melacak kendaraan, Anda harus menghapusnya dari penyedia lokasi dan hapus penyedia lokasi dari tampilan peta seperti dijelaskan dalam bagian. Contoh di sini berlaku untuk perjalanan on demand dan tugas terjadwal terlepas dari implementasi layanan.

Menghapus kendaraan dari penyedia lokasi

Untuk mencegah penyedia lokasi melacak kendaraan, hapus ID kendaraan pengiriman dari penyedia lokasi.

Perjalanan on-demand

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Tugas terjadwal

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);

Langkah berikutnya