Menyesuaikan polyline rute

Dokumen ini membahas cara menyesuaikan tampilan rute untuk kendaraan yang dilacak di peta. Rute digambar di peta dalam bentuk polyline. Untuk setiap pasangan koordinat di jalur aktif atau jalur yang tersisa dari kendaraan , library akan membuat objek google.maps.Polyline. Anda dapat menata gaya objek Polyline dengan menentukan penyesuaian polyline yang kemudian diterapkan oleh library dalam dua situasi:

  • Sebelum menambahkan objek ke peta
  • Saat data yang digunakan untuk objek telah berubah

Menata gaya polyline

Serupa dengan cara Anda dapat menyesuaikan penanda, Anda dapat menata gaya polyline rute dengan berbagai cara:

  1. Menata gaya polyline rute berdasarkan jenis: Gunakan PolylineOptions untuk diterapkan ke semua objek Polyline yang cocok saat dibuat atau diperbarui. Untuk contohnya, lihat Menata gaya polyline berdasarkan jenis.

  2. Menata gaya polyline rute berdasarkan data: Tentukan fungsi penyesuaian berdasarkan data dari pelacakan armada, atau dari sumber eksternal:

    • Data dari pelacakan armada: Pelacakan armada meneruskan data polyline ke fungsi penyesuaian, termasuk data tentang status kendaraan saat ini. Anda dapat menata gaya polyline berdasarkan data ini, termasuk mewarnai objek Polyline dengan warna yang lebih gelap, atau membuatnya lebih tebal saat kendaraan bergerak lebih lambat.

    • Sumber eksternal: Anda dapat menggabungkan data pelacakan armada dengan data dari sumber di luar Fleet Engine dan menata gaya objek Polyline berdasarkan informasi tersebut.

    Untuk contohnya, lihat Menata gaya polyline berdasarkan data.

  3. Mengontrol visibilitas polyline rute: Anda dapat menyembunyikan atau menampilkan polyline menggunakan properti visible. Untuk mengetahui detailnya, lihat Mengontrol visibilitas polyline dalam panduan ini.

  4. Menampilkan informasi tambahan untuk penanda kendaraan atau lokasi: Anda dapat menampilkan informasi tambahan menggunakan properti infowindow. Untuk mengetahui detailnya, lihat Menampilkan informasi tambahan untuk penanda kendaraan atau lokasi dalam panduan ini.

Opsi penyesuaian polyline

Opsi penyesuaian berikut tersedia di FleetEngineVehicleLocationProviderOptions dan FleetEngineDeliveryVehicleLocationProviderOptions. Anda dapat menetapkan penyesuaian untuk status jalur yang berbeda dalam perjalanan kendaraan:

Menata gaya polyline rute berdasarkan jenis

Untuk menata gaya polyline rute berdasarkan jenis, ubah gaya objek Polyline menggunakan PolylineOptions.

Contoh berikut menunjukkan cara mengonfigurasi gaya untuk objek Polyline dengan PolylineOptions. Ikuti pola ini untuk menyesuaikan gaya objek apa pun Polyline menggunakan salah satu penyesuaian polyline rute yang tercantum dalam Opsi penyesuaian polyline dalam panduan ini.

Contoh untuk perjalanan sesuai permintaan atau tugas terjadwal

JavaScript

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

TypeScript

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

Menata gaya polyline rute menggunakan data

Untuk menata gaya polyline rute menggunakan data, ubah gaya objek Polyline menggunakan fungsi penyesuaian.

Contoh berikut menunjukkan cara mengonfigurasi gaya untuk rute aktif menggunakan fungsi penyesuaian. Ikuti pola ini untuk menyesuaikan gaya objek apa pun Polylinemenggunakan salah satu parameter penyesuaian polyline yang tercantum dalam Opsi penyesuaian polyline dalam panduan ini.

Contoh perjalanan sesuai permintaan

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[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'});
      }
    }
  };

Contoh tugas terjadwal

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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'});
      }
    }
  };

Contoh gaya visual yang mempertimbangkan lalu lintas (khusus perjalanan sesuai permintaan)

Fleet Engine menampilkan data kecepatan lalu lintas untuk jalur aktif dan jalur yang tersisa untuk kendaraan yang diikuti. Anda dapat menggunakan informasi ini untuk menata gaya objek Polyline sesuai dengan kecepatan lalu lintasnya:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Mengontrol visibilitas polyline

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

Contoh untuk perjalanan sesuai permintaan atau tugas terjadwal

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Menampilkan jendela informasi untuk penanda kendaraan atau lokasi

Anda dapat menggunakan InfoWindow untuk menampilkan informasi tambahan tentang penanda kendaraan atau lokasi.

Contoh berikut menunjukkan cara membuat InfoWindow dan melampirkannya ke penanda kendaraan.

Contoh perjalanan sesuai permintaan

JavaScript

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

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

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

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 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();

Contoh tugas terjadwal

JavaScript

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

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

Langkah berikutnya