Melacak inventaris Anda dengan Library Pelacakan Armada JavaScript

Library Pelacakan Armada JavaScript memungkinkan Anda memvisualisasikan lokasi di armada mereka dalam waktu yang mendekati real-time. Library ini menggunakan API Deliveries untuk memungkinkan visualisasi kendaraan pengiriman serta tugas-tugasnya. Seperti Library Pelacakan Pengiriman JavaScript, berisi komponen peta JavaScript yang merupakan pengganti langsung agar entitas google.maps.Map standar dan komponen data dapat terhubung dengan Fleet Engine.

Komponen

Library Pelacakan Armada JavaScript menyediakan komponen untuk visualisasi kendaraan pengiriman dan perhentian, serta feed data mentah untuk PWT atau sisa jarak ke pengiriman.

Tampilan peta Pelacakan Armada

Komponen tampilan peta Pelacakan Armada memvisualisasikan lokasi kendaraan dan tugas. Jika rute untuk sebuah kendaraan diketahui, komponen tampilan peta menganimasikan kendaraan tersebut saat bergerak di sepanjang jalur yang diprediksi.

Penyedia lokasi

Penyedia lokasi bekerja dengan informasi yang disimpan di Fleet Engine untuk mengirimkan lokasi informasi untuk objek yang dilacak ke dalam peta {i>user journey<i}.

Penyedia lokasi kendaraan pengiriman

Penyedia lokasi kendaraan pengiriman menampilkan satu nomor kendaraan pengiriman informasi lokasi. Laman ini memiliki informasi tentang lokasi kendaraan serta tugas yang diselesaikan oleh kendaraan pengiriman.

Penyedia lokasi armada pengiriman

Penyedia lokasi armada pengiriman menampilkan beberapa kendaraan lokasi tidak akurat atau tidak sesuai. Anda dapat memfilter kendaraan atau lokasi tertentu, atau menampilkan seluruh armada.

Mengontrol visibilitas lokasi yang dilacak

Bagian ini menjelaskan aturan visibilitas untuk objek lokasi yang dilacak di peta untuk penyedia lokasi standar Fleet Engine. Kustom atau turunan penyedia lokasi dapat mengubah aturan visibilitas.

Kendaraan pengiriman

Kendaraan pengiriman terlihat segera setelah dibuat di Fleet Engine, dan terlihat di sepanjang rutenya terlepas dari tugasnya.

Penanda lokasi tugas

Perhentian kendaraan terencana ditampilkan di peta sebagai penanda perhentian kendaraan. Penanda untuk tugas yang telah selesai ditampilkan dengan gaya yang berbeda dengan penghentian yang direncanakan.

Lokasi hasil tugas ditampilkan dengan penanda hasil tugas. Tugas dengan hasil Effective akan ditampilkan dengan penanda tugas yang berhasil, sementara semua tugas lainnya ditampilkan dengan penanda tugas yang gagal.

Memulai Library Pelacakan Fleet JavaScript

Sebelum menggunakan Library Pelacakan Fleet JavaScript, pastikan Anda sudah familier dengan Fleet Engine dan dengan 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, membuat 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 nilainya setiap kunci ke *. Token harus dibuat menggunakan Fleet Engine Peran Cloud IAM Service Super User. Perhatikan bahwa hal ini memberikan akses yang luas untuk membuat, membaca, dan mengubah entity Fleet Engine, dan hanya boleh dibagikan dengan pengguna tepercaya.

Contoh berikut menunjukkan cara membuat token untuk pelacakan dengan 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 layanan sertifikat akun untuk proyek Anda. Sebaiknya hanya buat token dengan di server Anda 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.
• Nomor expiresInSeconds. Masa berlaku token berakhir dalam waktu tersebut setelah pengambilan.

Library Pelacakan Armada JavaScript meminta token melalui autentikasi pengambil token jika salah satu kondisi berikut terpenuhi:

• Token tidak memiliki token yang valid, seperti saat belum memanggil pengambil di 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, {i>library<i} akan menggunakan token yang diterbitkan sebelumnya, masih valid dan melakukan tidak memanggil pengambil.

Contoh berikut menunjukkan cara membuat pengambil token autentikasi:

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

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, pertahankan berikut ini:

• Endpoint harus menampilkan waktu habis masa berlaku untuk token; dalam contoh di atas, ini diberikan sebagai data.ExpiresInSeconds.
• Pengambil token autentikasi harus melewati 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

Memuat peta dari HTML

Contoh berikut menunjukkan cara memuat Berbagi Perjalanan JavaScript library dari URL yang ditentukan. Parameter callback menjalankan initMap fungsi tersebut setelah API dimuat. Atribut defer memungkinkan browser terus merender sisa halaman Anda selagi API dimuat.

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

Ikuti kendaraan pengiriman

Bagian ini menunjukkan cara menggunakan Library Pelacakan Fleet 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 terlebih dahulu untuk Fleet Engine Deliveries API. Gunakan project ID dan referensi ke factory token Anda untuk membuat instance-nya.

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

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

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; bernama map_canvas dalam contoh di bawah ini.

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

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 {i>meta<i} mencakup PWT dan jarak yang tersisa sebelum penjemputan atau penurunan kendaraan berikutnya. Perubahan ke informasi meta akan memicu peristiwa update. Contoh berikut menunjukkan cara memproses peristiwa perubahan ini.

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

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

Memantau error

Error yang muncul secara asinkron saat meminta pemicu informasi kendaraan pengiriman peristiwa error. Contoh berikut menunjukkan cara memproses peristiwa ini untuk menangani error.

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

Hentikan pelacakan

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

locationProvider.deliveryVehicleId = '';

locationProvider.deliveryVehicleId = '';

Menghapus penyedia lokasi dari tampilan peta

Contoh berikut menampilkan cara menghapus penyedia lokasi dari tampilan peta.

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Melihat armada pengiriman

Bagian ini menunjukkan cara menggunakan library Berbagi Perjalanan JavaScript untuk melihat armada pengiriman. Pastikan untuk memuat library dari fungsi callback yang ditentukan dalam tag skrip sebelum menjalankan kode Anda.

Membuat instance penyedia lokasi inventaris pengiriman

Library Pelacakan Armada JavaScript menentukan penyedia lokasi yang mengambil beberapa kendaraan dari FleetEngine Deliveries API. Gunakan ID project Anda serta referensi ke pengambil token Anda untuk membuat instance-nya.

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"',
        });

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 di peta. Filter ini diteruskan langsung ke Fleet Engine. Lihat ListDeliveryVehiclesRequest.filter untuk format yang didukung.

locationRestriction membatasi area untuk menampilkan kendaraan di peta. Tag situs global juga mengontrol apakah pelacakan lokasi aktif atau tidak. Pelacakan lokasi tidak akan dimulai hingga ini disetel.

Setelah penyedia lokasi dibuat, melakukan inisialisasi tampilan peta.

Menetapkan pembatasan lokasi menggunakan area pandang peta

Batas locationRestriction dapat dikonfigurasi agar cocok dengan area saat ini terlihat dalam tampilan peta.

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

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 armada dari deliveryVehicles menggunakan penyedia lokasi. {i>Meta informasi<i} meliputi data kendaraan properti seperti status navigasi, jarak yang tersisa, dan atribut khusus; lihat dokumentasi referensi untuk mengetahui detail selengkapnya. Perubahan pada informasi meta akan memicu peristiwa update. Tujuan contoh berikut menunjukkan cara memproses peristiwa perubahan ini.

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

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

Memantau error

Error yang muncul secara asinkron saat meminta informasi inventaris pengiriman dapat memicu peristiwa error. Untuk contoh yang menunjukkan cara memproses peristiwa ini, lihat ke Memproses error.

Hentikan pelacakan

Untuk menghentikan penyedia lokasi melacak armada pengiriman, tetapkan batas penyedia lokasi ke null.

locationProvider.locationRestriction = null;

locationProvider.locationRestriction = null;

Menghapus penyedia lokasi dari tampilan peta

Contoh berikut menampilkan cara menghapus penyedia lokasi dari tampilan peta.

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Melacak kendaraan pengiriman sambil melihat armada pengiriman

Sambil melihat armada, Anda dapat menunjukkan rute dan tugas mendatang untuk kendaraan pengiriman. Untuk melakukannya, buat instance Lokasi Armada Pengiriman dan Penyedia Lokasi Kendaraan Pengiriman, lalu tambahkan keduanya ke tampilan peta:

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

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 di peta. Gunakan penyesuaian penanda untuk mengaktifkan lokasi kendaraan pengiriman penyedia untuk melacak kendaraan pengiriman saat penanda armadanya diklik:

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

// 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:

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

// 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, menata 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 aplikasi apa pun yang menggunakan Google Maps dari Konsol Google Cloud tanpa memerlukan perubahan pada kode Anda. Gaya peta disimpan sebagai ID peta di project Cloud Anda. Kepada menerapkan gaya pada peta Pelacakan Armada JavaScript Anda, tentukan mapId saat Anda membuat JourneySharingMapView. Kolom mapId tidak dapat diubah atau ditambahkan setelah JourneySharingMapView dibuat instance-nya. Hal berikut contoh menunjukkan cara mengaktifkan gaya peta yang dibuat sebelumnya dengan ID peta.

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

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.

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

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 Fleet JavaScript, Anda dapat menyesuaikan tampilan dan nuansa penanda yang ditambahkan ke peta. Anda melakukannya dengan menentukan penyesuaian penanda, yang kemudian diterapkan oleh Library Pelacakan Fleet sebelum menambahkan penanda ke peta dan setiap pembaruan penanda.

Penyesuaian paling sederhana adalah dengan menentukan MarkerOptions yang akan diterapkan ke semua penanda dari jenis yang sama. Perubahan ditentukan dalam objek diterapkan setelah setiap penanda dibuat, menimpa opsi {i>default<i} apa pun.

Opsi lanjutan lainnya adalah menentukan fungsi penyesuaian. Penyesuaian memungkinkan penataan gaya penanda berdasarkan data, serta menambahkan interaktivitas terhadap penanda, seperti penanganan klik. Secara khusus, Pelacakan Armada meneruskan data ke fungsi penyesuaian tentang jenis objek yang ditunjukkan penanda mewakili: kendaraan, perhentian, atau tugas. Hal ini memungkinkan gaya penanda berubah berdasarkan status saat ini dari elemen penanda itu sendiri; misalnya, jumlah perhentian yang tersisa atau jenis tugas. Anda bahkan dapat menggabungkan data dari sumber di luar Fleet Engine dan memberi gaya penanda berdasarkan informasi tersebut.

Selain itu, Anda dapat menggunakan fungsi penyesuaian untuk memfilter visibilitas penanda. Untuk melakukannya, panggil setVisible(false) pada penanda.

Namun, demi alasan performa, sebaiknya filter dengan filter native di penyedia lokasi, seperti FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter Meskipun demikian, ketika Anda membutuhkan fungsi filter tambahan, Anda dapat menerapkan memfilter menggunakan fungsi penyesuaian.

Library Pelacakan Fleet menyediakan parameter penyesuaian berikut:

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

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 parameter penyesuaian penanda yang tercantum di atas.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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 penanda parameter penyesuaian yang tercantum di atas.

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

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 menggunakan penanda mana pun parameter penyesuaian yang tercantum di atas.

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

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 semua penanda menggunakan penyesuaian penanda apa pun parameter yang tercantum di atas.

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

Menggunakan penyesuaian polyline saat mengikuti kendaraan pengiriman

Dengan Library Pelacakan Armada JavaScript, Anda juga dapat menyesuaikan tampilan dan nuansa rute kendaraan yang diikuti di peta. Perpustakaan membuat google.maps.Polyline untuk setiap pasangan koordinat di kendaraan yang aktif atau tersisa jalur tertentu. Anda dapat menata gaya objek Polyline dengan menentukan penyesuaian polyline. Tujuan Google Cloud library kemudian menerapkan penyesuaian ini dalam dua situasi: sebelum menambahkan ke peta, dan kapan data yang digunakan untuk objek telah berubah.

Mirip dengan penyesuaian penanda, Anda bisa menentukan serangkaian PolylineOptions untuk diterapkan ke semua objek Polyline yang cocok saat objek tersebut dibuat atau diperbarui.

Demikian pula, Anda dapat menentukan fungsi penyesuaian. Fungsi penyesuaian memungkinkan penataan gaya individu objek berdasarkan data yang dikirim oleh Fleet Engine. Fungsi ini dapat mengubah gaya visual setiap objek berdasarkan kendaraan saat ini negara bagian: misalnya, mewarnai objek Polyline dengan bayangan yang lebih dalam, atau membuat menjadi lebih tebal saat kendaraan bergerak lebih lambat. Anda bahkan dapat bergabung dari sumber di luar Fleet Engine dan menata gaya objek Polyline berdasarkan hal tersebut tidak akurat atau tidak sesuai.

Anda dapat menentukan penyesuaian menggunakan parameter yang disediakan di FleetEngineDeliveryVehicleLocationProviderOptions Anda bisa mengatur penyesuaian untuk berbagai status jalur di perjalanan--sudah pernah bepergian, aktif bepergian, atau belum bepergian. Tujuan parameternya adalah sebagai berikut:

• takenPolylineCustomization, untuk jalur yang sudah ditempuh;
• activePolylineCustomization, untuk jalur yang berjalan aktif;
• 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 apa pun menggunakan dari penyesuaian polyline yang disebutkan sebelumnya.

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Ubah gaya visual objek Polyline menggunakan fungsi penyesuaian

Contoh berikut menunjukkan cara mengonfigurasi gaya visual untuk Polyline aktif menggunakan fungsi penyesuaian. Ikuti pola ini untuk menyesuaikan gaya visual objek Polyline apa pun menggunakan penyesuaian polyline yang tercantum sebelumnya.

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

// 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 tak terlihat, setel visible properti:

remainingPolylineCustomization = {visible: false};

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.

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

// 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 penyesuaian otomatis

Anda dapat menghentikan peta agar tidak secara otomatis menyesuaikan area pandang ke kendaraan dan rute yang diantisipasi dengan menonaktifkan pencocokan otomatis. Contoh berikut menunjukkan cara menonaktifkan penyesuaian otomatis saat Anda mengonfigurasi berbagi perjalanan tampilan peta.

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

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 bisa mengganti peta yang ada yang menyertakan penanda atau penyesuaian lainnya tanpa kehilangan penyesuaian tersebut.

Misalnya, Anda memiliki halaman web dengan google.maps.Map standar entitas 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, yang mencakup Pelacakan Fleet:

1. Tambahkan kode untuk factory token autentikasi.
2. Lakukan inisialisasi penyedia lokasi dalam fungsi initMap().
3. Lakukan inisialisasi tampilan peta dalam fungsi initMap(). Tampilannya berisi peta.
4. Pindahkan penyesuaian ke dalam fungsi callback untuk inisialisasi tampilan peta.
5. 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, ID tersebut sekarang akan dirender pada peta.