Halaman ini diterjemahkan oleh Cloud Translation API.

Melacak inventaris Anda dengan Library Pelacakan Armada JavaScript

Library Pelacakan Armada JavaScript memungkinkan Anda memvisualisasikan lokasi kendaraan di armada Anda dalam waktu yang mendekati {i>real time<i}. Library ini menggunakan class On Demand Transportasi dan Pengiriman API untuk memungkinkan visualisasi kendaraan serta perjalanan. Armada JavaScript Library Pelacakan berisi komponen peta JavaScript yang merupakan layanan drop-in pengganti entitas google.maps.Map standar dan komponen data untuk 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 sisa jarak ke suatu perjalanan.

Tampilan peta Pelacakan Armada

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

Tampilan peta Pelacakan Armada
contoh

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

Penyedia lokasi kendaraan menampilkan informasi lokasi kendaraan tunggal. Halaman ini berisi informasi tentang lokasi kendaraan dan perjalanan saat ini yang ditetapkan ke saat ini.

Penyedia lokasi armada

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

Mengontrol visibilitas lokasi yang dilacak

Aturan visibilitas menentukan kapan objek lokasi yang dilacak terlihat di Peta untuk penyedia lokasi Fleet Engine. Catatan - Menggunakan lokasi khusus atau turunan dapat mengubah aturan visibilitas.

Kendaraan

Kendaraan akan terlihat segera setelah dibuat di Fleet Engine, dan dapat dilihat jika Vehicle_state adalah Online. Ini berarti kendaraan dapat terlihat bahkan jika tidak ada perjalanan aktif yang ditetapkan untuk kendaraan.

Penanda lokasi titik jalan

Penanda lokasi titik jalan menunjukkan titik di sepanjang awal perjalanan kendaraan dengan tempat asal dan diakhiri dengan tujuan akhir. Lokasi titik jalan penanda dapat ditentukan sebagai berikut:

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

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

Memulai Library Pelacakan Fleet JavaScript

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

Membuat klaim ID perjalanan dan ID kendaraan

Untuk melacak kendaraan menggunakan lokasi kendaraan , buat Token Web JSON (JWT) dengan perjalanan Klaim tanda pengenal dan ID kendaraan.

Untuk membuat payload JWT, tambahkan klaim tambahan di bagian otorisasi dengan tombol tripid dan vehicleid, serta tetapkan value pada setiap tombol ke *. Token harus dibuat menggunakan Cloud Fleet Engine Service Super User Peran IAM. Perlu diperhatikan bahwa hal ini memberikan akses yang luas untuk membuat, membaca, dan memodifikasi Armada entitas mesin telusur, dan hanya boleh dibagikan kepada 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": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

Membuat pengambil token autentikasi

Library Pelacakan Fleet JavaScript meminta token menggunakan 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.

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

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

String token.
Nomor expiresInSeconds. Masa berlaku token berakhir dalam waktu tersebut 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 pembuatan token, pertahankan berikut ini:

Endpoint harus menampilkan waktu habis masa berlaku untuk token; dalam contoh di atas, diberikan sebagai data.ExpiresInSeconds.
Pengambil token autentikasi harus melewati waktu masa berlaku (dalam detik, dari waktu pengambilan) ke library, seperti yang ditunjukkan dalam contoh.
SERVER_TOKEN_URL bergantung pada implementasi backend Anda, yaitu 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 Berbagi Perjalanan JavaScript dari URL tertentu. Parameter callback menjalankan fungsi initMap setelah API dimuat. Atribut defer memungkinkan browser melanjutkan rendering bagian lain 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 saat ini. Pastikan untuk memuat library dari fungsi callback yang ditentukan di tag skrip sebelum menjalankan kode Anda.

Membuat instance penyedia lokasi kendaraan

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

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 Berbagi Perjalanan JavaScript, lakukan inisialisasi tampilan peta dan menambahkannya ke halaman HTML. Halaman Anda harus berisi elemen <div> yang menyimpan tampilan peta. Elemen <div> diberi nama <div> di bagian contoh di bawah ini.

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 tempat lainnya jarak sebelum penjemputan atau penurunan kendaraan berikutnya. Perubahan pada meta informasi memicu peristiwa update. Contoh berikut menunjukkan cara mendengarkan 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);
  }
});

Memantau error

Error yang muncul secara asinkron karena pemicu permintaan informasi kendaraan peristiwa error. Contoh berikut menunjukkan cara memproses peristiwa ini di untuk menangani kesalahan.

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

Melihat armada kendaraan

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

Membuat instance penyedia lokasi armada kendaraan

Library Pelacakan Armada JavaScript terlebih dahulu menentukan penyedia lokasi yang mengambil beberapa kendaraan dari On Demand Rides and Deliveries API. Gunakan ID project Anda serta referensi ke pengambil token Anda 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. Tag situs global juga mengontrol apakah pelacakan lokasi aktif atau tidak. Pelacakan lokasi tidak akan dimulai hingga ini diatur.

Setelah penyedia lokasi dibuat, lakukan inisialisasi peta tampilan.

Menetapkan pembatasan lokasi menggunakan area pandang peta

Batas locationRestriction dapat dikonfigurasi agar cocok dengan area yang terlihat di 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 meliputi properti kendaraan seperti status navigasi, jarak ke titik jalan berikutnya dan atribut khusus; lihat referensi dokumentasi untuk mengetahui detail selengkapnya. Perubahan pada informasi meta akan memicu peristiwa update. Tujuan 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);
    }
  }
});

Memantau error

Error yang muncul secara asinkron saat meminta informasi armada kendaraan dapat memicu peristiwa error. Untuk contoh yang menunjukkan cara memproses peristiwa ini, lihat ke 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 pada peta 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. Tujuan gaya peta disimpan sebagai ID peta di project Cloud Anda. Untuk menerapkan gaya ke Peta Pelacakan Armada JavaScript, tentukan mapId saat Anda membuat JourneySharingMapView. Kolom mapId tidak dapat diubah atau ditambahkan setelah JourneySharingMapView dibuat instance-nya. Hal berikut contoh ini 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 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.

Anda dapat membuat penyesuaian sederhana dengan menentukan MarkerOptions diterapkan ke semua penanda dengan jenis yang sama. Perubahan yang ditentukan dalam objek diterapkan setelah setiap penanda dibuat, yang menimpa setiap penanda lainnya.

Sebagai opsi lanjutan, Anda dapat menentukan fungsi penyesuaian. Fungsi penyesuaian memungkinkan gaya visual penanda berdasarkan data serta seperti menambahkan interaktivitas ke penanda, seperti penanganan klik. Secara khusus, Fleet Pelacakan meneruskan data ke fungsi penyesuaian tentang jenis objek yang penanda mewakili: kendaraan, perhentian, atau tugas. Hal ini kemudian memungkinkan penataan gaya penanda untuk berubah berdasarkan status saat ini dari elemen penanda itu sendiri; misalnya, jumlah perhentian atau jenis tugas yang tersisa. 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 FleetEngineFleetLocationProvider.vehicleFilter Meskipun demikian, ketika Anda membutuhkan fungsi filter tambahan, Anda dapat menerapkan memfilter menggunakan fungsi penyesuaian.

Library Pelacakan Fleet menyediakan parameter penyesuaian berikut:

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.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  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.

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 menggunakan penanda mana pun parameter penyesuaian 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 semua penanda menggunakan penyesuaian penanda apa pun parameter 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 Library Pelacakan Fleet, Anda juga dapat menyesuaikan tampilan dan nuansa rute kendaraan yang diikuti pada peta. Perpustakaan membuat google.maps.Polyline untuk setiap pasangan koordinat di kendaraan yang aktif atau tersisa path (jalur). 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. {i>Function<i} ini bisa mengubah gaya visual setiap objek berdasarkan status saat ini kendaraan; misalnya, mewarnai objek Polyline dengan bayangan yang lebih dalam, atau membuatnya lebih tebal saat kendaraan bergerak lebih lambat. Anda bahkan dapat bergabung dengan dari sumber di luar Fleet Engine dan tentukan gaya objek Polyline berdasarkan hal tersebut tidak akurat atau tidak sesuai.

Anda dapat menentukan penyesuaian menggunakan parameter yang disediakan di FleetEngineVehicleLocationProviderOptions 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.

JavaScript

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

TypeScript

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

Ubah gaya visual objek `Polyline` menggunakan fungsi penyesuaian

Contoh berikut menunjukkan cara mengonfigurasi objek Polyline yang aktif gaya visual. Ikuti pola ini untuk menyesuaikan gaya visual objek Polyline apa pun 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 tak terlihat, setel visible properti:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Merender objek `Polyline` berbasis traffic

Fleet Engine menampilkan data kecepatan lalu lintas untuk jalur aktif dan tersisa untuk kendaraan yang digunakan. Anda dapat menggunakan informasi ini untuk mengatur gaya Polyline sesuai dengan kecepatan lalu lintasnya:

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 penanda lokasi atau kendaraan.

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

JavaScript

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

// (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 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 pencocokan otomatis saat mengonfigurasi peta berbagi perjalanan {i>view<i}.

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 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 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 Berbagi Perjalanan JavaScript, yang mencakup Pelacakan Fleet:

Tambahkan kode untuk factory token autentikasi.
Lakukan inisialisasi penyedia lokasi dalam fungsi initMap().
Lakukan inisialisasi tampilan peta dalam fungsi initMap(). Tampilan berisi atribut peta.
Memindahkan penyesuaian Anda ke dalam fungsi callback untuk tampilan peta inisialisasi.
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 tersebut akan dirender pada peta.

Melacak inventaris Anda dengan Library Pelacakan Armada JavaScript

Komponen

Tampilan peta Pelacakan Armada

Penyedia lokasi

Penyedia lokasi kendaraan

Penyedia lokasi armada

Mengontrol visibilitas lokasi yang dilacak

Kendaraan

Penanda lokasi titik jalan

Memulai Library Pelacakan Fleet JavaScript

Membuat klaim ID perjalanan dan ID kendaraan

Membuat pengambil token autentikasi

JavaScript

TypeScript

Memuat peta dari HTML

Ikuti kendaraan

Membuat instance penyedia lokasi kendaraan

JavaScript

TypeScript

Melakukan inisialisasi tampilan peta

JavaScript

TypeScript

Memproses peristiwa perubahan

JavaScript

TypeScript

Memantau error

JavaScript

TypeScript

Hentikan pelacakan

JavaScript

TypeScript

Menghapus penyedia lokasi dari tampilan peta

JavaScript

TypeScript

Melihat armada kendaraan

Membuat instance penyedia lokasi armada kendaraan

JavaScript

TypeScript

Menetapkan pembatasan lokasi menggunakan area pandang peta

JavaScript

TypeScript

Memproses peristiwa perubahan

JavaScript

TypeScript

Memantau error

Hentikan pelacakan

JavaScript

TypeScript

Menghapus penyedia lokasi dari tampilan peta

JavaScript

TypeScript

Menyesuaikan tampilan dan nuansa peta dasar

Menggunakan gaya visual peta berbasis cloud

JavaScript

TypeScript

Menggunakan gaya visual peta berbasis kode

JavaScript

TypeScript

Menggunakan penyesuaian penanda

Ubah gaya visual penanda menggunakan MarkerOptions

JavaScript

TypeScript

Mengubah gaya visual penanda menggunakan fungsi penyesuaian

JavaScript

TypeScript

Menambahkan penanganan klik ke penanda

JavaScript

TypeScript

Memfilter penanda yang terlihat

JavaScript

TypeScript

Menggunakan penyesuaian polyline saat mengikuti kendaraan

Ubah gaya visual objek Polyline menggunakan PolylineOptions

JavaScript

TypeScript

Ubah gaya visual objek Polyline menggunakan fungsi penyesuaian

JavaScript

TypeScript

Mengontrol visibilitas objek Polyline

JavaScript

Ubah gaya visual penanda menggunakan `MarkerOptions`

Ubah gaya visual objek `Polyline` menggunakan `PolylineOptions`

Ubah gaya visual objek `Polyline` menggunakan fungsi penyesuaian

Mengontrol visibilitas objek `Polyline`

Merender objek `Polyline` berbasis traffic

Menampilkan `InfoWindow` untuk penanda lokasi atau kendaraan