Melacak inventaris Anda dengan Library Pelacakan Armada JavaScript

Produk atau fitur ini ada dalam Pratinjau (pra-GA). Produk dan fitur pra-GA mungkin memiliki dukungan terbatas, dan perubahan pada produk serta fitur pra-GA mungkin tidak kompatibel dengan versi pra-GA lainnya. Penawaran Pra-GA tercakup dalam Persyaratan Khusus Layanan Google Maps Platform. Untuk mengetahui informasi selengkapnya, lihat deskripsi tahap peluncuran.

Dengan Library Pelacakan Armada JavaScript, Anda dapat memvisualisasikan lokasi kendaraan di fleet Anda secara mendekati real time. Library ini menggunakan On Demand Rides and Deliveries API untuk memungkinkan visualisasi kendaraan serta perjalanan. Library Pelacakan JavaScript Fleet berisi komponen peta JavaScript yang merupakan pengganti langsung untuk entitas google.maps.Map standar dan komponen data agar terhubung dengan Fleet Engine.

Komponen

Library Pelacakan Armada JavaScript menyediakan komponen untuk visualisasi kendaraan dan titik jalan perjalanan, serta feed data mentah untuk PWT atau jarak yang tersisa ke perjalanan.

Tampilan peta Pelacakan Armada

Komponen tampilan peta Fleet Tracking memvisualisasikan lokasi kendaraan dan titik jalan perjalanan. Jika rute untuk kendaraan diketahui, komponen tampilan peta akan menganimasikan kendaraan tersebut saat bergerak di sepanjang jalur yang diprediksi.

Penyedia lokasi

Penyedia lokasi menggunakan informasi yang disimpan di Fleet Engine untuk mengirimkan informasi lokasi untuk objek yang dilacak ke peta berbagi perjalanan.

Penyedia lokasi kendaraan

Penyedia lokasi kendaraan menampilkan informasi lokasi satu kendaraan. Laporan ini memiliki informasi tentang lokasi kendaraan dan perjalanan saat ini yang ditetapkan ke kendaraan.

Penyedia lokasi perangkat

Penyedia lokasi armada menampilkan informasi lokasi untuk beberapa kendaraan. Anda dapat memfilter untuk menampilkan kendaraan tertentu dan lokasinya, atau Anda dapat menampilkan lokasi kendaraan untuk seluruh armada.

Kontrol visibilitas lokasi yang dilacak

Aturan visibilitas menentukan kapan objek lokasi yang dilacak terlihat di Maps untuk penyedia lokasi Fleet Engine. Catatan - Penggunaan penyedia lokasi kustom atau turunan dapat mengubah aturan visibilitas.

Kendaraan

Kendaraan akan langsung terlihat setelah dibuat di Fleet Engine, dan terlihat saat kendaraan_state adalah Online. Ini berarti kendaraan dapat terlihat meskipun tidak ada perjalanan saat ini yang ditetapkan untuk kendaraan tersebut.

Penanda lokasi titik jalan

Penanda lokasi titik jalan menunjukkan titik-titik di sepanjang perjalanan kendaraan yang dimulai dengan tempat asal dan berakhir dengan tujuan akhir. Penanda lokasi titik jalan dapat ditentukan sebagai berikut:

• Asal - menunjukkan lokasi awal untuk perjalanan kendaraan
• Menengah - menunjukkan persinggahan untuk perjalanan kendaraan
• Tujuan - menunjukkan lokasi akhir untuk perjalanan kendaraan

Titik jalan kendaraan yang direncanakan ditampilkan pada peta sebagai penanda asal, perantara, dan tujuan.

Memulai Library Pelacakan Armada JavaScript

Sebelum menggunakan Library Pelacakan Armada JavaScript, pastikan Anda sudah memahami Fleet Engine dan cara mendapatkan kunci API. Kemudian, buat klaim ID perjalanan dan ID kendaraan.

Membuat klaim ID perjalanan dan ID kendaraan

Untuk melacak kendaraan menggunakan penyedia lokasi kendaraan, buat JSON Web Token (JWT) dengan ID perjalanan dan klaim ID kendaraan.

Untuk membuat payload JWT, tambahkan klaim tambahan di bagian otorisasi dengan kunci tripid dan vehicleid, lalu tetapkan value setiap kunci ke *. Token harus dibuat menggunakan peran Cloud IAM Fleet Engine Service Super User. Perhatikan bahwa hal ini memberikan akses luas untuk membuat, membaca, dan memodifikasi entity Fleet Engine, dan hanya boleh dibagikan kepada pengguna tepercaya.

Contoh berikut menunjukkan cara membuat token untuk melacak berdasarkan kendaraan dan tugas:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "[e-mail]",
  "sub": "[e-mail]",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

Membuat pengambil token autentikasi

Library Pelacakan Armada JavaScript meminta token menggunakan pengambil token autentikasi jika salah satu hal berikut berlaku:

• Token tidak memiliki token yang valid, seperti saat pengambilan belum memanggil pengambil pada pemuatan halaman baru, atau saat pengambil belum ditampilkan dengan token.
• Token yang diambil sebelumnya telah habis masa berlakunya.
• Masa berlaku token yang diambil sebelumnya akan berakhir dalam satu menit.

Jika tidak, library akan menggunakan token yang dikeluarkan sebelumnya yang masih valid dan tidak memanggil pengambil.

Anda dapat membuat pengambil token autentikasi untuk mengambil token yang dibuat dengan klaim yang sesuai di server menggunakan sertifikat akun layanan untuk project Anda. Penting untuk hanya membuat token di server Anda dan jangan pernah membagikan sertifikat Anda ke klien mana pun. Jika tidak, Anda dapat membobol keamanan sistem.

Pengambil harus menampilkan struktur data dengan dua kolom, yang digabungkan dalam Promise:

• String token.
• Angka expiresInSeconds. Masa berlaku token akan berakhir dalam waktu ini setelah pengambilan.

Contoh berikut menunjukkan cara membuat pengambil token autentikasi:

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

Saat menerapkan endpoint sisi server untuk membuat token, perhatikan hal berikut:

• Endpoint harus menampilkan waktu habis masa berlaku untuk token; dalam contoh di atas, ditetapkan sebagai data.ExpiresInSeconds.
• Pengambil token autentikasi harus meneruskan waktu habis masa berlaku (dalam hitungan detik, dari waktu pengambilan) ke library, seperti ditunjukkan pada contoh.
• SERVER_TOKEN_URL bergantung pada penerapan backend Anda, berikut adalah contoh URL:
  • https://SERVER_URL/token/driver/VEHICLE_ID
  • https://SERVER_URL/token/consumer/TRIP_ID
  • https://SERVER_URL/token/fleet_reader

Memuat peta dari HTML

Contoh berikut menunjukkan cara memuat library Perjalanan Perjalanan JavaScript dari URL tertentu. Parameter callback menjalankan fungsi initMap setelah API dimuat. Atribut defer memungkinkan browser terus merender sisa halaman saat API dimuat.

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

Ikuti kendaraan

Bagian ini menunjukkan cara menggunakan Library Pelacakan Armada JavaScript untuk mengikuti kendaraan. Pastikan untuk memuat library dari fungsi callback yang ditentukan dalam tag skrip sebelum menjalankan kode Anda.

Membuat instance penyedia lokasi kendaraan

Library Pelacakan Armada JavaScript menentukan penyedia lokasi untuk On Demand Rides and Deliveries API. Gunakan project ID Anda dan referensi ke factory token untuk membuat instance.

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

Melakukan inisialisasi tampilan peta

Setelah memuat library Perjalanan Perjalanan JavaScript, lakukan inisialisasi tampilan peta, lalu tambahkan ke halaman HTML. Halaman Anda harus berisi elemen <div> yang menyimpan tampilan peta. Elemen <div> diberi nama map_canvas pada contoh di bawah.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// If you did not specify a 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 wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

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

Memproses peristiwa perubahan

Anda dapat mengambil informasi meta tentang kendaraan dari objek vehicle menggunakan penyedia lokasi. Informasi meta mencakup PWT dan jarak yang tersisa sebelum penjemputan atau pengantaran kendaraan berikutnya. Perubahan pada informasi meta akan memicu peristiwa update. Contoh berikut menunjukkan cara memproses peristiwa perubahan ini.

JavaScript

locationProvider.addListener('update', e => {
  // e.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);
  }
});

Memproses error

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

JavaScript

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

TypeScript

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

Hentikan pelacakan

Untuk menghentikan penyedia lokasi melacak kendaraan, hapus ID kendaraan dari penyedia lokasi.

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Menghapus penyedia lokasi dari tampilan peta

Contoh berikut menampilkan cara menghapus penyedia lokasi dari tampilan peta.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Lihat armada kendaraan

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

Membuat instance penyedia lokasi armada kendaraan

JavaScript Fleet Tracking Library terlebih dahulu menentukan penyedia lokasi yang mengambil beberapa kendaraan dari On Demand Rides and Deliveries API. Gunakan project ID Anda serta referensi ke pengambil token untuk membuat instance.

JavaScript

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

          // Optionally, specify location bounds to
          // limit which 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 vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

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

          // Optionally, specify location bounds to
          // limit which 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 vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

vehicleFilter menentukan kueri yang digunakan untuk memfilter kendaraan yang ditampilkan di peta. Filter ini diteruskan langsung ke Fleet Engine. Lihat ListVehiclesRequest untuk format yang didukung.

locationRestriction membatasi area untuk menampilkan kendaraan di peta. Setelan ini juga mengontrol apakah pelacakan lokasi aktif atau tidak. Pelacakan lokasi tidak akan dimulai sampai ini ditetapkan.

Setelah penyedia lokasi dibuat, lakukan inisialisasi tampilan peta.

Menetapkan pembatasan lokasi menggunakan area pandang peta

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

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Memproses peristiwa perubahan

Anda dapat mengambil informasi meta tentang fleet dari objek vehicles menggunakan penyedia lokasi. Informasi meta mencakup properti kendaraan seperti status navigasi, jarak ke titik jalan berikutnya, dan atribut khusus; lihat dokumentasi referensi untuk mengetahui detail selengkapnya. Perubahan ke informasi meta akan memicu peristiwa pembaruan. Contoh berikut menunjukkan cara memproses peristiwa perubahan ini.

JavaScript

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

TypeScript

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

Memproses error

Error yang muncul secara asinkron saat meminta peristiwa error pemicu informasi armada kendaraan. Untuk mengetahui contoh cara memproses peristiwa ini, lihat Memproses error.

Hentikan pelacakan

Untuk menghentikan penyedia lokasi melacak fleet, tetapkan batas penyedia lokasi ke null.

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Menghapus penyedia lokasi dari tampilan peta

Contoh berikut menampilkan cara menghapus penyedia lokasi dari tampilan peta.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Menyesuaikan tampilan dan nuansa peta dasar

Untuk menyesuaikan tampilan dan nuansa komponen peta, tata gaya peta Anda menggunakan alat berbasis cloud atau dengan menetapkan opsi secara langsung dalam kode.

Menggunakan gaya visual peta berbasis cloud

Gaya visual peta berbasis Cloud memungkinkan Anda membuat dan mengedit gaya peta untuk setiap aplikasi yang menggunakan Google Maps dari Konsol Google Cloud tanpa memerlukan perubahan pada kode. Gaya peta disimpan sebagai ID peta di project Cloud Anda. Untuk menerapkan gaya ke peta Pelacakan Fleet JavaScript, tentukan mapId saat Anda membuat JourneySharingMapView. Kolom mapId tidak dapat diubah atau ditambahkan setelah JourneySharingMapView dibuat instance-nya. Contoh berikut menunjukkan cara mengaktifkan gaya peta yang dibuat sebelumnya dengan ID peta.

JavaScript

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

TypeScript

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

Menggunakan gaya visual peta berbasis kode

Cara lain untuk menyesuaikan gaya visual peta adalah dengan menetapkan mapOptions saat Anda membuat JourneySharingMapView.

JavaScript

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

TypeScript

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

Menggunakan penyesuaian penanda

Dengan Library Pelacakan Armada JavaScript, Anda dapat menyesuaikan tampilan dan nuansa penanda yang ditambahkan ke peta. Anda melakukannya dengan menentukan penyesuaian penanda, yang kemudian akan diterapkan oleh Fleet Tracking Library sebelum menambahkan penanda ke peta dan dengan setiap pembaruan penanda.

Anda dapat membuat penyesuaian sederhana dengan menentukan objek MarkerOptions untuk diterapkan ke semua penanda dari jenis yang sama. Perubahan yang ditentukan dalam objek diterapkan setelah setiap penanda dibuat, yang menimpa opsi default apa pun.

Sebagai opsi yang lebih canggih, Anda dapat menentukan fungsi penyesuaian. Fungsi penyesuaian memungkinkan gaya visual penanda berdasarkan data, serta menambahkan interaktivitas ke penanda, seperti penanganan klik. Secara khusus, Pelacakan Armada meneruskan data ke fungsi penyesuaian tentang jenis objek yang direpresentasikan oleh penanda: kendaraan, perhentian, atau tugas. Hal ini kemudian memungkinkan gaya visual penanda berubah berdasarkan status elemen penanda saat ini; misalnya, jumlah perhentian atau jenis tugas yang tersisa. Anda bahkan dapat menggabungkan data dari sumber di luar Fleet Engine dan menata gaya penanda berdasarkan informasi tersebut.

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

Namun, karena alasan performa, sebaiknya filter dengan pemfilteran native di penyedia lokasi, seperti FleetEngineFleetLocationProvider.vehicleFilter. Meskipun demikian, saat memerlukan fungsi pemfilteran tambahan, Anda dapat menerapkan pemfilteran menggunakan fungsi penyesuaian.

Library Pelacakan Fleet menyediakan parameter penyesuaian berikut:

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

Mengubah gaya penanda menggunakan MarkerOptions

Contoh berikut menunjukkan cara mengonfigurasi gaya penanda kendaraan dengan objek MarkerOptions. Ikuti pola ini untuk menyesuaikan gaya penanda menggunakan salah satu parameter penyesuaian penanda yang tercantum di atas.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Mengubah gaya visual penanda menggunakan fungsi penyesuaian

Contoh berikut menunjukkan cara mengonfigurasi gaya penanda kendaraan. Ikuti pola ini untuk menyesuaikan gaya visual penanda menggunakan salah satu parameter penyesuaian penanda yang tercantum di atas.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

Menambahkan penanganan klik ke penanda

Contoh berikut menunjukkan cara menambahkan penanganan klik ke penanda kendaraan. Ikuti pola ini untuk menambahkan penanganan klik ke penanda mana pun menggunakan salah satu parameter penyesuaian penanda yang tercantum di atas.

JavaScript

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

TypeScript

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

Memfilter penanda yang terlihat

Contoh berikut menunjukkan cara memfilter penanda kendaraan yang terlihat. Ikuti pola ini untuk memfilter penanda menggunakan salah satu parameter penyesuaian penanda yang tercantum di atas.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Menggunakan penyesuaian polyline saat mengikuti kendaraan

Dengan Fleet Tracking Library, Anda juga dapat menyesuaikan tampilan dan nuansa rute kendaraan yang diikuti di peta. Library ini akan membuat objek google.maps.Polyline untuk setiap pasangan koordinat dalam jalur kendaraan yang aktif atau tersisa. Anda dapat menata gaya objek Polyline dengan menentukan penyesuaian polyline. Selanjutnya, library akan menerapkan penyesuaian ini dalam dua situasi: sebelum menambahkan objek ke peta, dan saat data yang digunakan untuk objek telah berubah.

Serupa dengan penyesuaian penanda, Anda dapat menentukan kumpulan PolylineOptions untuk diterapkan ke semua objek Polyline yang cocok saat dibuat atau diupdate.

Demikian pula, Anda dapat menentukan fungsi penyesuaian. Fungsi penyesuaian memungkinkan gaya individual objek berdasarkan data yang dikirim oleh Fleet Engine. Fungsi ini dapat mengubah gaya setiap objek berdasarkan status kendaraan saat ini; misalnya, mewarnai objek Polyline dengan tempat 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 diberikan di FleetEngineVehicleLocationProviderOptions. Anda dapat menetapkan penyesuaian untuk berbagai status jalur dalam perjalanan kendaraan--sudah ditempuh, aktif bepergian, atau belum ditempuh. Parameternya adalah sebagai berikut:

• takenPolylineCustomization, untuk jalur yang telah ditempuh;
• activePolylineCustomization, untuk jalur perjalanan yang aktif;
• remainingPolylineCustomization, untuk jalur yang belum ditempuh.

Ubah gaya objek Polyline menggunakan PolylineOptions

Contoh berikut menunjukkan cara mengonfigurasi gaya visual untuk objek Polyline dengan PolylineOptions. Ikuti pola ini untuk menyesuaikan gaya visual objek Polyline menggunakan salah satu penyesuaian polyline yang tercantum sebelumnya.

JavaScript

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

TypeScript

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

Mengubah gaya visual objek Polyline menggunakan fungsi penyesuaian

Contoh berikut menunjukkan cara mengonfigurasi gaya visual 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.vehicle.waypoints[0].distanceMeters;
    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: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Mengontrol visibilitas objek Polyline

Secara default, semua objek Polyline terlihat. Untuk membuat objek Polyline tidak terlihat, tetapkan properti visible-nya:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Merender objek Polyline berbasis traffic

Fleet Engine menampilkan data kecepatan traffic untuk jalur aktif dan yang tersisa untuk kendaraan yang diikuti. Anda dapat menggunakan informasi ini untuk menata gaya objek Polyline sesuai dengan kecepatan traffic-nya:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Menampilkan InfoWindow untuk penanda lokasi atau kendaraan

Anda dapat menggunakan InfoWindow untuk menampilkan informasi tambahan tentang kendaraan atau penanda lokasi.

Contoh berikut menunjukkan cara membuat InfoWindow dan melampirkannya ke penanda kendaraan.

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

Nonaktifkan pengepasan otomatis

Anda dapat menghentikan peta agar tidak otomatis menyesuaikan area tampilan dengan kendaraan dan rute yang diperkirakan dengan menonaktifkan pemasangan otomatis. Contoh berikut menunjukkan cara menonaktifkan pemasangan otomatis saat Anda mengonfigurasi tampilan peta berbagi perjalanan.

JavaScript

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

TypeScript

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

Mengganti peta yang ada

Anda dapat mengganti peta yang ada yang menyertakan penanda atau penyesuaian lainnya tanpa kehilangan penyesuaian tersebut.

Misalnya, Anda memiliki halaman web dengan entitas google.maps.Map standar tempat penanda ditampilkan:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      // Initialize and add the map
      function initMap() {
        // The location of Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // 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 Oracle Park
        var marker = new google.maps.Marker({ position: oraclePark, map: map });
      }
    </script>
    <!-- Load the API from the specified URL.
      * The async attribute allows the browser to render the page while the API loads.
      * The key parameter will contain your own API key (which is not needed for this tutorial).
      * The callback parameter executes the initMap() function.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    ></script>
  </body>
</html>

Untuk menambahkan library Journey Journey JavaScript, yang menyertakan Fleet Tracking:

1. Tambahkan kode untuk factory token autentikasi.
2. Lakukan inisialisasi penyedia lokasi di fungsi initMap().
3. Lakukan inisialisasi tampilan peta dalam fungsi initMap(). Tampilan tersebut berisi peta.
4. Pindahkan penyesuaian Anda ke 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 FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          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.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

          // The location of Oracle Park
          var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
          // 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 Oracle Park
          var marker = new google.maps.Marker({position: oraclePark, 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&v=beta"
    ></script>
  </body>
</html>

Jika Anda mengoperasikan kendaraan dengan ID yang ditentukan di dekat Oracle Park, kendaraan akan dirender di peta.