Menyesuaikan polyline rute

Pilih platform: Android iOS JavaScript

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 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 gaya individual 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 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 status jalur yang berbeda dalam perjalanan kendaraan, sebagai berikut:

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.

JavaScript

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

TypeScript

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 parameter penyesuaian polyline rute yang tercantum sebelumnya.

JavaScript

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

TypeScript

// 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:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};