Menyesuaikan polyline rute

Dokumen ini membahas cara menyesuaikan polyline rute untuk peta yang Anda gunakan di aplikasi pelacakan perjalanan berbasis web untuk pengguna konsumen.

Dengan Consumer SDK, Anda dapat mengontrol visibilitas polyline rute atau menata gaya polyline rute untuk rute perjalanan di peta. SDK membuat objek google.maps.Polyline untuk setiap pasangan koordinat di jalur aktif atau jalur yang tersisa dalam perjalanan. Library kemudian menerapkan penyesuaian ini dalam dua situasi:

• sebelum menambahkan objek ke peta
• saat data yang digunakan untuk objek telah berubah

Menata gaya polyline rute

Sama seperti cara Anda menata gaya penanda, Anda dapat menata gaya polyline rute menggunakan parameter penyesuaian. Dari sana, Anda dapat mengonfigurasi gaya menggunakan salah satu pendekatan berikut:

• Paling sederhana: Gunakan PolylineOptions untuk diterapkan ke semua objek Polyline yang cocok saat dibuat atau diperbarui.
• Lanjutan: Tentukan fungsi penyesuaian. Fungsi penyesuaian memungkinkan penataan gaya tersendiri pada objek berdasarkan data yang dikirim oleh Fleet Engine. Fungsi ini dapat mengubah gaya setiap objek berdasarkan status perjalanan saat ini; misalnya, mewarnai objek Polyline dengan warna yang lebih gelap, atau membuatnya lebih tebal saat kendaraan bergerak lebih lambat. Anda bahkan dapat menggabungkan dari sumber di luar Fleet Engine dan menata gaya objek Polyline berdasarkan informasi tersebut.

Parameter penyesuaian

Saat menata gaya polyline rute, Anda menggunakan parameter yang disediakan di FleetEngineTripLocationProviderOptions. Parameter ini menyediakan status jalur yang berbeda dalam perjalanan kendaraan, sebagai berikut:

• Jalur Sudah dilalui: Gunakan takenPolylineCustomization.
• Jalur yang aktif dilalui: Gunakan activePolylineCustomization.
• Jalur Belum dilalui: Gunakan remainingPolylineCustomization.

Gunakan PolylineOptions

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

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

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

Menggunakan fungsi penyesuaian untuk menata gaya polyline rute

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

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[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'});
      }
    }
  };

// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[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 polyline rute

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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};