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 yang tersisa dari 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

Serupa dengan cara menata gaya penanda, Anda menata gaya polyline rute menggunakan parameter penyesuaian. Dari sana, Anda akan mengonfigurasi gaya visual menggunakan salah satu pendekatan berikut:

• Paling sederhana: Gunakan PolylineOptions untuk diterapkan ke semua objek Polyline yang cocok saat dibuat atau diupdate.
• Lanjutan: Tentukan fungsi penyesuaian. Fungsi penyesuaian memungkinkan penataan gaya masing-masing objek berdasarkan data yang dikirim oleh Fleet Engine. Fungsi ini dapat mengubah gaya visual setiap objek berdasarkan status perjalanan saat ini; misalnya, mewarnai objek Polyline warna yang lebih dalam, atau membuatnya lebih tebal saat kendaraan melaju lebih lambat. Anda bahkan dapat bergabung 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 memberikan berbagai status jalur dalam perjalanan kendaraan, sebagai berikut:

• Jalur yang sudah dilalui: Gunakan takenPolylineCustomization.
• Jalur yang dilalui secara aktif: Gunakan activePolylineCustomization.
• Jalur belum ditempuh: Gunakan remainingPolylineCustomization.

Gunakan PolylineOptions

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

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

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

Menggunakan fungsi penyesuaian untuk menata gaya visual polyline rute

Contoh berikut menunjukkan cara mengonfigurasi gaya visual untuk polyline rute aktif. Ikuti pola ini untuk menyesuaikan gaya visual objek Polyline 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-nya:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};