Melacak pengiriman dengan Library Pelacakan Pengiriman JavaScript

Library Pelacakan Pengiriman JavaScript memungkinkan Anda memvisualisasikan lokasi kendaraan dan lokasi minat yang dilacak di Fleet Engine. Perpustakaan berisi komponen peta JavaScript yang merupakan pengganti langsung agar entity google.maps.Map standar dan komponen data dapat terhubung dengan Fleet Engine. Dengan menggunakan Library Pelacakan Pengiriman JavaScript, Anda dapat memberikan pengalaman pelacakan pengiriman animasi yang dapat disesuaikan dari aplikasi web Anda.

Komponen

Library Pelacakan Pengiriman JavaScript menyediakan komponen untuk visualisasi dari kendaraan dan rute saat menuju ke tujuan, serta data mentah feed untuk PWT pengemudi atau jarak tempuh yang tersisa.

Tampilan peta Pelacakan Pengiriman

Komponen tampilan peta memvisualisasikan lokasi kendaraan dan tujuan. Jika rute untuk kendaraan diketahui, komponen tampilan peta akan dianimasikan kendaraan itu saat bergerak di sepanjang jalur yang diprediksi.

Penyedia lokasi pengiriman

Penyedia lokasi pengiriman memberikan informasi lokasi untuk objek yang dilacak ke dalam peta pelacakan pengiriman untuk pelacakan pengiriman kilometer pertama dan terakhir.

Anda dapat menggunakan penyedia lokasi pengiriman untuk melacak:

  • Lokasi pengambilan atau pengiriman paket.
  • Lokasi dan rute kendaraan pengiriman.

Objek lokasi yang dilacak

Penyedia lokasi melacak lokasi objek seperti kendaraan dan tujuan.

Lokasi tujuan

Lokasi tujuan adalah lokasi tempat perjalanan berakhir. Untuk pengiriman pelacakan, itu adalah lokasi tugas yang direncanakan.

Lokasi kendaraan

Lokasi kendaraan adalah lokasi kendaraan yang dilacak. Ini dapat digunakan termasuk rute untuk kendaraan.

Pengambil token autentikasi

Untuk mengontrol akses ke data lokasi yang disimpan di Fleet Engine, Anda harus menerapkan layanan pembuatan JSON Web Token (JWT) untuk Fleet Engine di server Anda. Kemudian, terapkan pengambil token autentikasi sebagai bagian. aplikasi web Anda, menggunakan JavaScript Journey Sharing Library untuk mengautentikasi akses ke data lokasi.

Opsi gaya visual

Gaya penanda dan polyline menentukan tampilan dan nuansa objek lokasi terlacak pada peta. Anda dapat menggunakan opsi gaya kustom untuk mengubah gaya default agar cocok dengan gaya aplikasi web Anda.

Mengontrol visibilitas lokasi yang dilacak

Bagian ini menjelaskan kontrol visibilitas untuk objek yang dilacak di peta. Aturan-aturan ini berlaku untuk dua kategori objek:

  • Penanda lokasi
  • Data tugas

Visibilitas penanda lokasi

Semua penanda lokasi untuk tempat asal dan tujuan selalu ditampilkan pada peta. Misalnya, lokasi pengiriman selalu ditampilkan di peta, terlepas dari status penyampaiannya.

Visibilitas data tugas

Bagian ini menjelaskan aturan visibilitas default yang berlaku untuk data tugas, seperti lokasi kendaraan dan rute lainnya. Anda dapat menyesuaikan banyak tugas tetapi tidak semua:

  • Tugas ketidaktersediaan -- Anda tidak dapat menyesuaikan visibilitas untuk tugas ini.
  • Tugas kendaraan aktif -- Anda dapat menyesuaikan jenis tugas ini.
  • Tugas kendaraan tidak aktif -- Anda tidak dapat menyesuaikan visibilitas untuk tugas ini.

Tugas ketidaktersediaan

Jika ada setidaknya satu tugas ketidaktersediaan (misalnya, jika pengemudi beristirahat atau kendaraan sedang mengisi bahan bakar) di rute ke tugas yang dilacak, kendaraan tidak terlihat. Perkiraan kedatangan dan perkiraan waktu penyelesaian tugas masih tersedia.

Tugas kendaraan aktif

Tujuan TaskTrackingInfo menyediakan sejumlah elemen data yang bisa terlihat dalam Library Pelacakan Pengiriman. Secara default, kolom ini terlihat saat tugas ditetapkan ke kendaraan dan saat kendaraan berada dalam jarak 5 perhentian dari tugas. Tujuan visibilitas berakhir saat tugas diselesaikan atau dibatalkan. Isiannya adalah sebagai berikut ini:

  • Merutekan polyline
  • Perkiraan waktu tiba
  • Perkiraan waktu penyelesaian tugas
  • Jarak mengemudi lainnya ke tugas
  • Jumlah perhentian tersisa
  • Lokasi kendaraan

Anda bisa menyesuaikan konfigurasi visibilitas per tugas dengan mengatur tindakan TaskTrackingViewConfig pada tugas saat membuat atau memperbarui tugas dalam Fleet Engine. Hal ini menciptakan aturan mengenai kapan elemen data individual tersedia yang dapat didasarkan pada kriteria berikut (disebut sebagai opsi visibilitas di bawah ini):

  • Jumlah perhentian tersisa
  • Durasi hingga perkiraan waktu kedatangan
  • Jarak mengemudi tersisa
  • Selalu terlihat
  • Tidak pernah terlihat

Perhatikan bahwa setiap elemen data hanya dapat dikaitkan dengan satu opsi visibilitas. Kriteria tidak dapat digabungkan menggunakan ATAU atau DAN.

Contoh penyesuaian adalah sebagai berikut. Aturan penyesuaian tersebut adalah:

  • Tampilkan polyline rute jika kendaraan berada dalam 3 perhentian.
  • Menampilkan PWT jika jarak mengemudi yang tersisa lebih pendek dari 5.000 meter.
  • Jangan pernah menampilkan jumlah perhentian yang tersisa.
  • Satu kolom lainnya mempertahankan visibilitas default yang ditampilkan saat kendaraan berada dalam jarak 5 perhentian dari tugas.
"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Anda juga dapat menyesuaikan konfigurasi visibilitas default untuk project Anda dengan menghubungi tim dukungan.

Polyline rute dan aturan visibilitas lokasi kendaraan:

Ketika polyline rute terlihat, lokasi kendaraan juga harus terlihat, jika tidak, lokasi kendaraan dapat ditunjukkan oleh akhir polyline. Bahwa berarti polyline rute tidak bisa memiliki opsi visibilitas yang tidak terlalu membatasi.

Aturan ini harus diikuti untuk menyediakan polyline / kendaraan rute yang valid kombinasi visibilitas lokasi:

  • Jika rute polyline dan lokasi kendaraan memiliki opsi visibilitas yang sama jenis:

    • Jika opsi visibilitasnya adalah jumlah perhentian yang tersisa, durasi hingga PWT, atau jarak mengemudi yang tersisa, polyline rute harus memberikan nilai yang lebih kecil dari atau sama dengan nilai yang ditetapkan untuk opsi visibilitas ini untuk kendaraan lokasi HTTP/HTTPS. Contohnya sebagai berikut:
    "taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingStopCountThreshold": 5
  },
}
    • Jika polyline rute memiliki opsi visibilitas yang selalu terlihat, lokasi kendaraan juga harus menyediakan opsi visibilitas yang selalu terlihat.
    • Jika lokasi kendaraan memiliki opsi visibilitas yang tidak pernah terlihat, rute polyline juga harus menyediakan opsi visibilitas yang tidak pernah terlihat.

  • Jika polyline rute dan lokasi kendaraan memiliki opsi visibilitas yang berbeda jenis, lokasi kendaraan hanya dapat dilihat saat kedua visibilitasnya pilihan terpenuhi.

    Contohnya sebagai berikut:

    "taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingDrivingDistanceMetersThreshold": 3000
  },
}

    Dalam contoh ini, lokasi kendaraan hanya terlihat jika perhentian yang tersisa jumlahnya minimal 3 DAN jarak mengemudi yang tersisa minimal 3000 meter.

Mulai menggunakan Library Berbagi Perjalanan JavaScript

Sebelum menggunakan Library Berbagi Perjalanan JavaScript, pastikan Anda sudah familier dengan Fleet Engine dan dengan mendapatkan kunci API.

Untuk melacak pengiriman, buat klaim ID pelacakan terlebih dahulu.

Membuat klaim ID pelacakan

Untuk melacak pengiriman menggunakan penyedia lokasi pengiriman, membuat JSON Web Token (JWT) dengan klaim ID pelacakan.

Untuk membuat payload JWT, tambahkan klaim tambahan di bagian otorisasi dengan trackingid kunci. Tetapkan nilainya ke ID pelacakan pengiriman.

Contoh berikut menampilkan cara membuat token untuk pelacakan berdasarkan ID pelacakan:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "trackingid": "tid_54321",
   }
}

Membuat pengambil token autentikasi

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

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

  • String token.
  • Nomor expiresInSeconds. Masa berlaku token berakhir dalam waktu tersebut setelah pengambilan.

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

  • Token tidak memiliki token yang valid, seperti saat belum memanggil pengambil di pemuatan halaman baru, atau saat pengambil belum menampilkan token.
  • Masa berlaku token yang diambil sebelumnya telah berakhir.
  • Masa berlaku token yang diambil sebelumnya akan berakhir dalam waktu satu menit.

Jika tidak, {i>library<i} akan menggunakan token yang diterbitkan sebelumnya, masih valid dan melakukan tidak memanggil pengambil.

Contoh berikut menunjukkan cara membuat pengambil token autentikasi:

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, ini diberikan sebagai data.ExpiresInSeconds.
  • Pengambil token autentikasi harus melewati masa berakhir (dalam detik, dari waktu pengambilan) ke library, seperti yang ditunjukkan dalam contoh.
  • SERVER_TOKEN_URL bergantung pada implementasi backend Anda. Berikut adalah URL untuk backend aplikasi contoh:
    • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
    • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
    • https://SERVER_URL/token/fleet_reader

Memuat peta dari HTML

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

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

Mengikuti pengiriman

Bagian ini menunjukkan cara menggunakan Library Pelacakan Pengiriman JavaScript untuk mengikuti pengambilan atau pengantaran kiriman. Pastikan untuk memuat library dari fungsi callback yang ditentukan dalam tag skrip sebelum menjalankan kode Anda.

Membuat instance penyedia lokasi pengiriman

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

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

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

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

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

Melakukan inisialisasi tampilan peta

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

Untuk menghindari kondisi race, tetapkan ID pelacakan untuk penyedia lokasi dalam callback yang dipanggil setelah peta diinisialisasi.

JavaScript

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

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

TypeScript

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

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

ID Pelacakan

ID pelacakan yang diberikan kepada penyedia lokasi mungkin sesuai dengan beberapa tugas; misalnya, tugas pengambilan dan pengiriman untuk paket yang sama, atau beberapa upaya pengiriman yang gagal. Satu tugas dipilih untuk ditampilkan di peta pelacakan pengiriman. Tugas yang akan ditampilkan ditentukan sebagai berikut:

  1. Jika hanya ada satu tugas pengambilan yang terbuka, tugas tersebut akan ditampilkan. Terjadi error jika ada beberapa tugas pengambilan yang terbuka.
  2. Jika hanya ada satu tugas pengiriman yang terbuka, tugas tersebut akan ditampilkan. Sebuah {i>error<i} adalah dibuat jika ada beberapa tugas pengiriman yang terbuka.
  3. Jika ada tugas pengiriman yang ditutup:
    • Jika hanya ada satu tugas pengiriman yang ditutup, tugas tersebut akan ditampilkan.
    • Jika ada beberapa tugas pengiriman yang ditutup, tugas dengan tugas terbaru waktu hasil ditampilkan.
    • Jika ada beberapa tugas pengiriman yang telah ditutup, tidak ada yang memberikan hasil waktu, maka akan muncul pesan {i>error<i}.
  4. Jika ada tugas pengambilan yang ditutup:
    • Jika hanya ada satu tugas pengambilan yang ditutup, tugas tersebut akan ditampilkan.
    • Jika ada beberapa tugas pengambilan yang ditutup, tugas dengan tugas terbaru waktu hasil ditampilkan.
    • Jika ada beberapa tugas pengambilan yang ditutup, tidak ada yang hasil waktu, maka akan muncul pesan {i>error<i}.
  5. Jika tidak, tugas tidak akan ditampilkan.

Memproses peristiwa perubahan

Anda dapat mengambil informasi meta tugas dari info pelacakan tugas menggunakan penyedia lokasi. Informasi {i>meta<i} mencakup PWT, jumlah perhentian yang tersisa, dan jarak yang tersisa sebelum penjemputan atau pengiriman. Perubahan pada informasi meta akan memicu peristiwa update. Contoh berikut menunjukkan cara memproses peristiwa perubahan ini.

JavaScript

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

TypeScript

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

Menangani error

Error yang muncul secara asinkron saat meminta informasi pengiriman 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);
});

Catatan: Pastikan untuk menggabungkan panggilan library dalam blok try...catch untuk menangani error tak terduga.

Hentikan pelacakan

Untuk menghentikan penyedia lokasi melacak pengiriman, hapus ID pelacakan dari penyedia lokasi.

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

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, menata gaya peta Anda menggunakan alat berbasis cloud atau dengan menetapkan opsi langsung dalam kode.

Menggunakan gaya visual peta berbasis cloud

Gaya visual peta berbasis Cloud memungkinkan Anda membuat dan mengedit gaya peta untuk aplikasi apa pun yang menggunakan Google Maps dari Konsol Google Cloud, tanpa memerlukan perubahan pada kode Anda. Gaya peta disimpan sebagai ID peta di project Cloud Anda. Untuk menerapkan gaya ke peta Pelacakan Pengiriman 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'
  }
  // Any other styling options.
});

TypeScript

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

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 Pengiriman JavaScript, Anda dapat menyesuaikan tampilan dan tampilan penanda yang ditambahkan ke peta. Hal ini dilakukan dengan menentukan penanda yang diterapkan oleh Library Pelacakan Pengiriman sebelum menambahkan penanda ke peta dan setiap pembaruan penanda.

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

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

Library Shipment Tracking menyediakan parameter penyesuaian berikut di FleetEngineShipmentLocationProviderOptions:

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 menggunakan salah satu penyesuaian penanda yang tercantum di atas.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Mengubah gaya visual penanda menggunakan fungsi penyesuaian

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

Menambahkan penanganan klik ke penanda

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

JavaScript

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

TypeScript

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

Menggunakan penyesuaian polyline

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

Mirip dengan penyesuaian penanda, Anda bisa menentukan serangkaian PolylineOptions untuk diterapkan ke semua objek Polyline yang cocok saat 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 pengiriman; 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 FleetEngineShipmentLocationProviderOptions Anda bisa mengatur penyesuaian untuk berbagai status jalur di perjalanan--sudah pernah bepergian, aktif bepergian, atau belum bepergian. Tujuan parameternya adalah sebagai berikut:

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.taskTrackingInfo.remainingDrivingDistanceMeters;
    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: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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};

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

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 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 otomatis menyesuaikan area pandang ke kendaraan dan rute yang diantisipasi dengan menonaktifkan pencocokan otomatis. Contoh berikut menunjukkan cara menonaktifkan penyesuaian otomatis saat Anda mengonfigurasi berbagi perjalanan tampilan peta.

JavaScript

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

TypeScript

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

Mengganti peta yang ada

Anda dapat menggunakan Library Pelacakan Pengiriman JavaScript untuk mengganti peta yang ada yang menyertakan penanda atau penyesuaian lainnya tanpa kehilangan penyesuaian tersebut.

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

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, initially centered at Mountain View, CA.
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, now positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * The callback parameter executes the initMap() function.
    -->
    <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Untuk menambahkan library Berbagi Perjalanan JavaScript:

  1. Tambahkan kode untuk factory token autentikasi.
  2. Lakukan inisialisasi penyedia lokasi dalam fungsi initMap().
  3. Lakukan inisialisasi tampilan peta dalam fungsi initMap(). Tampilannya berisi peta.
  4. Pindahkan penyesuaian ke dalam fungsi callback untuk inisialisasi tampilan peta.
  5. Tambahkan library lokasi ke loader API.

Contoh berikut menunjukkan perubahan yang akan dilakukan:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
let locationProvider;

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

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider.
  locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
    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
  });

  locationProvider.trackingId = TRACKING_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.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Jika Anda memiliki paket yang dilacak dengan ID yang ditentukan di dekat Uluru, ID tersebut sekarang akan dirender pada peta.