Menyesuaikan polyline rute

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

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

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

Menata gaya polyline rute

Mirip dengan cara menata gaya penanda, Anda menata gaya rute polyline menggunakan parameter penyesuaian. Dari sana, Anda 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 individu berdasarkan yang dikirim oleh Fleet Engine. Fungsi ini dapat mengubah gaya visual 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 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 menyediakan berbagai status jalur dalam perjalanan kendaraan, sebagai berikut:

• Jalur yang sudah dilalui: Gunakan takenPolylineCustomization.
• Jalur yang ditempuh 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 polyline rute

Contoh berikut menunjukkan cara mengonfigurasi gaya visual untuk rute aktif polyline. 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 tak terlihat, tetapkan properti visible-nya:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};