Solusi Armada Terakhir saat ini hanya tersedia untuk pelanggan tertentu. Hubungi bagian penjualan untuk mempelajari lebih lanjut.

Melacak inventaris Anda dengan Library Pelacakan Armada JavaScript

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Library Pelacakan Perangkat Inventaris JavaScript memungkinkan Anda memvisualisasikan lokasi kendaraan di armadanya secara hampir real time. Library ini menggunakan Deliveryies API untuk memungkinkan visualisasi kendaraan pengiriman serta tugas. Seperti Library Pelacakan Pengiriman JavaScript, library ini berisi komponen peta JavaScript yang merupakan pengganti drop-in untuk entity google.maps.Map dan komponen data standar untuk terhubung dengan Fleet Engine.

Komponen

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

Tampilan peta Pelacakan Perangkat

Komponen tampilan peta Pelacakan Perangkat menampilkan visual lokasi kendaraan dan tugas. Jika rute untuk kendaraan diketahui, komponen tampilan peta akan menganimasikan kendaraan tersebut saat bergerak di sepanjang jalur yang diprediksi.

Contoh tampilan peta Pelacakan Perangkat

Penyedia lokasi

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

Penyedia lokasi kendaraan pengantaran

Penyedia lokasi kendaraan pengiriman menampilkan informasi lokasi kendaraan pengiriman tunggal. Aplikasi ini memiliki informasi tentang lokasi kendaraan serta tugas yang diselesaikan oleh kendaraan pengiriman.

Penyedia lokasi inventaris pengiriman

Penyedia lokasi armada pengiriman menampilkan informasi lokasi beberapa kendaraan. 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 pada peta untuk penyedia lokasi yang telah ditentukan Fleet Engine. Penyedia lokasi kustom atau turunan 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 yang direncanakan ditampilkan di peta sebagai penanda perhentian kendaraan. Penanda untuk tugas yang sudah selesai ditampilkan dengan gaya yang berbeda dengan perhentian yang direncanakan untuk kendaraan.

Lokasi hasil tugas ditampilkan dengan penanda hasil tugas. Tugas dengan hasil yang Berhasil ditampilkan dengan penanda tugas yang berhasil, sedangkan semua tugas lainnya ditampilkan dengan penanda tugas yang gagal.

Memulai Library Pelacakan Perangkat Inventaris JavaScript

Sebelum menggunakan Library Pelacakan Armada JavaScript, pastikan Anda telah terbiasa dengan Fleet Engine dan mendapatkan kunci API. Kemudian, buat ID tugas dan klaim ID kendaraan pengiriman.

Membuat klaim ID tugas dan klaim ID kendaraan pengiriman

Untuk melacak kendaraan pengiriman menggunakan penyedia lokasi kendaraan pengiriman, buat Token Web JSON (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 nilai setiap kunci ke *. Token harus dibuat menggunakan peran Cloud IAM Fleet Engine Service Super User. Perhatikan bahwa tindakan ini memberikan akses luas untuk membuat, membaca, dan mengubah entitas Fleet Engine, dan hanya boleh dibagikan kepada pengguna tepercaya.

Contoh berikut menunjukkan cara membuat token untuk melakukan pelacakan menurut 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 pengambilan token autentikasi

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

Contoh berikut menunjukkan cara membuat pengambilan 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.ExpiresInSeconds
  };
}

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

  • Endpoint harus menampilkan waktu habis masa berlaku untuk token; dalam contoh di atas, endpoint diberikan sebagai data.ExpiresInSeconds.
    • Pengambil token autentikasi harus meneruskan waktu habis masa berlakunya (dalam hitungan detik, dari waktu penerbitan) ke library, seperti yang ditunjukkan dalam contoh.

Memuat peta dari HTML

Contoh berikut menunjukkan cara memuat library Berbagi Perjalanan JavaScript dari URL yang ditentukan. Parameter callback menjalankan fungsi initMap setelah API dimuat. Atribut defer memungkinkan browser melanjutkan rendering halaman Anda lainnya saat API dimuat. Perhatikan bahwa parameter v=beta harus ditentukan.

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

Ikuti kendaraan pengiriman

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

Membuat instance penyedia lokasi kendaraan pengiriman

Library Pelacakan Fleet JavaScript menentukan penyedia lokasi untuk Fleet Engine Deliveries API. Gunakan project ID dan referensi ke factory token Anda untuk membuat instance.

JavaScript

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

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

TypeScript

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

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

Melakukan inisialisasi tampilan peta

Setelah memuat library JavaScript Journey Sharing, inisialisasi tampilan peta dan tambahkan ke halaman HTML. Halaman Anda harus berisi elemen <div> yang menyimpan tampilan peta. Elemen <div> bernama map_canvas pada contoh di bawah.

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProvider: 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);

TypeScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProvider: 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 meta mencakup PWT dan jarak yang tersisa sebelum pengambilan atau penurunan kendaraan berikutnya. Perubahan pada informasi meta akan memicu peristiwa update. Contoh berikut menunjukkan cara memproses peristiwa perubahan ini.

JavaScript

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

TypeScript

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

Memproses error

Error yang muncul secara asinkron dari permintaan informasi kendaraan pengiriman akan memicu peristiwa error. Contoh berikut menunjukkan cara memproses peristiwa ini untuk menangani error.

JavaScript

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

TypeScript

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

Melihat armada pengiriman

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

Membuat instance penyedia lokasi inventaris pengiriman

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

JavaScript

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

TypeScript

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

locationRestriction membatasi area untuk menampilkan kendaraan pada peta. Kontrol lokasi juga mengontrol apakah pelacakan lokasi aktif atau tidak. Pelacakan lokasi tidak akan dimulai hingga lokasi ini ditetapkan.

Setelah penyedia lokasi dibuat, inisialisasi tampilan peta.

Menetapkan pembatasan lokasi menggunakan area pandang peta

Batas locationRestriction dapat dikonfigurasi agar sesuai dengan area yang saat ini 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 armada dari objek deliveryVehicles menggunakan penyedia lokasi. Informasi meta meliputi properti kendaraan seperti status navigasi, jarak yang tersisa, dan atribut khusus; lihat dokumentasi referensi untuk detail selengkapnya. Perubahan pada informasi meta akan memicu peristiwa update. Contoh berikut menunjukkan cara memproses peristiwa perubahan ini.

JavaScript

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

TypeScript

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

Memproses error

Error yang muncul secara asinkron dari permintaan informasi armada pengiriman akan memicu peristiwa error. Untuk contoh yang menunjukkan cara memproses peristiwa ini, lihat Memproses error.

Menyesuaikan tampilan dan nuansa peta dasar

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

Menggunakan penataan gaya peta berbasis cloud

Penataan gaya peta berbasis cloud memungkinkan Anda membuat dan mengedit gaya peta untuk aplikasi apa pun yang menggunakan Google Maps dari Google Cloud Console tanpa memerlukan perubahan pada kode. Gaya peta disimpan sebagai ID peta di project Cloud Anda. Untuk menerapkan gaya ke peta Pelacakan Perangkat Arm JavaScript Anda, tentukan mapId saat 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'),
  locationProvider: locationProvider,
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

TypeScript

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

Menggunakan penataan gaya 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'),
  locationProvider: locationProvider,
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

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

Mengubah gaya visual dan visibilitas rute

Untuk mengonfigurasi gaya dan visibilitas rute yang diambil dan diantisipasi, gunakan opsi gaya kustom. Untuk informasi selengkapnya, lihat antarmuka PolylineOptions.

Contoh berikut menunjukkan cara mengonfigurasi gaya dan visibilitas rute yang diantisipasi. Untuk mengonfigurasi gaya dan visibilitas rute yang diambil, gunakan takenRoutePolylineSetup, bukan anticipatedRoutePolylineSetup.

JavaScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function anticipatedRoutePolylineSetup({
    defaultPolylineOptions, defaultVisible}) {
  // If this function is not specified, the 
  // PolylineOptions object contained in 
  // defaultPolylineOptions is used to render the
  // anticipated route polyline. visible property sets the
  // polyline's visibility. Modify this object and 
  // pass it back to customize the style of the map.
  defaultPolylineOptions.strokeOpacity = 0.5;
  defaultPolylineOptions.strokeColor = 'red';
  return {
    polylineOptions: defaultPolylineOptions,
    visible: true
  };
}

// As an alternative, set static PolylineOptions to
// use for the anticipated route.
const anticipatedRoutePolylineOptionsSetup = {
  polylineOptions: {
    strokeOpacity: 0.5,
    strokeColor: 'red',
    …
  },
  visible: true,
};

TypeScript

// This function is specified in the 
// JourneySharingMapView constructor's options 
// parameter.
function anticipatedRoutePolylineSetup(options: {
  defaultPolylineOptions: google.maps.PolylineOptions,
  visible: boolean,
}): {
  polylineOptions: google.maps.PolylineOptions,
  visible: boolean,
} {
  // If this function is not specified, the 
  // PolylineOptions object contained in 
  // defaultPolylineOptions is used to render the
  // anticipated route polyline. visible property sets the
  // polyline's visibility. Modify this object and 
  // pass it back to customize the style of the map.
  options.defaultPolylineOptions.strokeOpacity = 0.5;
  options.defaultPolylineOptions.strokeColor = 'red';
  return {
    polylineOptions: options.defaultPolylineOptions,
    visible: true
  };
}

// As an alternative, set static PolylineOptions to
// use for the anticipated route.
const anticipatedRoutePolylineSetup = {
  polylineOptions: {
    strokeOpacity: 0.5,
    strokeColor: 'red',
    …
  },
  visible: true,
};

Menggunakan fungsi penyesuaian penanda

Dengan Library Pelacakan Armada JavaScript, Anda dapat menyesuaikan tampilan dan nuansa penanda yang ditambahkan ke peta. Lakukan hal ini dengan menentukan fungsi penyesuaian penanda, yang kemudian dipanggil oleh Library Pelacakan Fleet sebelum menambahkan penanda ke peta dan setiap pembaruan penanda. Dengan fungsi penyesuaian, Anda juga dapat menambahkan interaktivitas ke penanda, seperti penanganan klik.

Pelacakan Perangkat meneruskan data ke fungsi penyesuaian tentang jenis objek yang diwakili oleh penanda: kendaraan, perhentian, atau tugas. Hal ini kemudian memungkinkan penataan gaya penanda berdasarkan status elemen penanda itu sendiri 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 Anda memfilter dengan filter native di penyedia lokasi, seperti FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter. Meskipun demikian, saat memerlukan fungsi pemfilteran tambahan, Anda dapat menerapkan pemfilteran menggunakan fungsi penyesuaian.

Library Pelacakan Perangkat menyediakan fungsi penyesuaian berikut:

Mengubah gaya penanda

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

JavaScript

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

TypeScript

deliveryVehicleMarkerCustomization =
  (params) => {
    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 apa pun menggunakan fungsi penyesuaian penanda apa pun yang tercantum di atas.

JavaScript

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

TypeScript

deliveryVehicleMarkerCustomization =
  (params) => {
    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 fungsi penyesuaian penanda yang tercantum di atas.

JavaScript

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

TypeScript

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

Menampilkan InfoWindow untuk penanda kendaraan atau lokasi

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

TypeScript

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

Menonaktifkan pas otomatis

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

JavaScript

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

TypeScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProvider: 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 yang penandanya 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 JavaScript Journey Sharing, yang mencakup Pelacakan Perangkat:

  1. Menambahkan kode untuk factory token autentikasi.
  2. Lakukan inisialisasi penyedia lokasi dalam fungsi initMap().
  3. Lakukan inisialisasi tampilan peta dalam fungsi initMap(). Tampilan berisi peta.
  4. Pindahkan penyesuaian Anda 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'), 
    locationProvider: 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, kendaraan tersebut akan dirender di peta.