Menyesuaikan polyline rute

Pilih platform: Android iOS JavaScript

Sebelum menyesuaikan polyline rute (atau penanda), Anda harus menginisialisasi opsi penyesuaian UI terlebih dahulu.

Lakukan inisialisasi opsi penyesuaian UI

Callback yang direkomendasikan yang digunakan untuk menetapkan opsi penyesuaian UI pada awalnya dideklarasikan di GMTCMapViewDelegate. Callback mapViewDidInitialize dipicu saat objek GMTCMapView siap merender peta. Koordinator gaya diinisialisasi, tetapi tidak ada elemen UI.

Swift

/** ViewController.swift */

class ViewController: UIViewController, GMTCMapViewDelegate {

  // MARK: - GMTCMapViewDelegate

  func mapViewDidInitialize(_ mapview: GMTCMapView) {
    // Set the UI customization options here.
  }
}

Objective-C

/** ViewController.m */

@interface ViewController () <GMTCMapViewDelegate>

#pragma mark GMTCMapViewDelegate

- (void)mapViewDidInitialize:(GMTCMapView *)mapview {
  // Set the UI customization options here.
}

Menyesuaikan polyline

Penyesuaian polyline ditetapkan menggunakan GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:).

Contoh berikut menunjukkan cara menyetel opsi gaya polyline:

Jenis polyline

Anda dapat menyesuaikan jenis polyline berikut:

  • GMTCPolylineType.activeRoute: Rute yang dilalui kendaraan ke titik berikutnya penumpang, baik itu titik penjemputan atau pengantaran.
  • GMTCPolylineType.remainingRoute: Segmen perjalanan yang tersisa setelah kendaraan menyelesaikan GMTCPolylineType.activeRoute.

Kedua jenis ini ditampilkan di sepanjang perjalanan bersama.

Properti polyline

Properti yang dapat Anda sesuaikan untuk setiap polyline adalah subset dari properti yang disediakan di Google Maps PolylineOptions. Properti Consumer SDK GMTCPolylineStyleOptions memiliki karakteristik berikut:

  • Dibuat menggunakan penginisialisasi.
  • Dapat berupa immutable atau mutable jika Anda ingin memberikan nilai kustom untuk properti apa pun.
  • Memiliki nilai default.

Anda dapat menyesuaikan properti berikut:

  • color
  • width
  • isVisible: Untuk menonaktifkan polyline, tetapkan isVisible ke false.
  • isTrafficEnabled: Properti ini ditetapkan ke false secara default.

Contoh

Swift

/** MapViewController.swift */

private func updatePolylineUIOptions() {
  // Get the GMTCConsumerMapStyleCoordinator
  let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator

  // The polyline type that you would like to set custom UI options for.
  let customizablePolylineType = GMTCPolylineType.activeRoute

  // Initializing polyline options with default values (immutable version).
  let polylineStyleOptions = GMTCPolylineStyleOptions()
  consumerMapStyleCoordinator.setPolylineStyleOptions(
    polylineStyleOptions, polylineType: customizablePolylineType)

  // Initializing polyline options with custom values (mutable version).
  let mutablePolylineStyleOptions = GMTCMutablePolylineStyleOptions()
  mutablePolylineStyleOptions.isVisible = true
  mutablepolylineStyleOptions.strokeWidth = 8.0
  mutablepolylineStyleOptions.strokeColor = .blue
  mutablepolylineStyleOptions.zIndex = 1000
  mutablepolylineStyleOptions.isGeodesic = true
  mutablePolylineStyleOptions.isTrafficEnabled = true
  mutablePolylineStyleOptions.setTrafficColorFor(.slow, color: .yellow)
  mutablePolylineStyleOptions.setTrafficColorFor(.trafficJam, color: .purple)
  consumerMapStyleCoordinator.setPolylineStyleOptions(
    mutablePolylineStyleOptions, polylineType: customizablePolylineType)

  // Reset polyline options to default values.
  consumerMapStyleCoordinator.setPolylineStyleOptions(
    nil, polylineType: customizablePolylineType)
}

Objective-C

/** MapViewController.m */

- (void)updatePolylineUIOptions {
  // Get the GMTCConsumerMapStyleCoordinator
  GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];

  // The polyline type that you would like to set custom UI options for.
  GMTCPolylineType customizablePolylineType = GMTCPolylineTypeActiveRoute;

  // Initializing polyline options with default values (immutable version).
  GMTCPolylineStyleOptions *polylineStyleOptions = [[GMTCPolylineStyleOptions alloc] init];
  [consumerMapStyleCoordinator setPolylineStyleOptions:polylineStyleOptions
                               polylineType:customizablePolylineType];

  // Initializing polyline options with custom values (mutable version).
  GMTCMutablePolylineStyleOptions *mutablePolylineStyleOptions = [[GMTCMutablePolylineStyleOptions alloc] init];
  mutablePolylineStyleOptions.isVisible = YES;
  mutablepolylineStyleOptions.strokeWidth = 8.0;
  mutablepolylineStyleOptions.strokeColor = [UIColor blueColor];
  mutablepolylineStyleOptions.zIndex = 1000;
  mutablepolylineStyleOptions.isGeodesic = YES;
  mutablePolylineStyleOptions.isTrafficEnabled = YES;
  [mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeSlow color:[UIColor yellowColor]];
  [mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeTrafficJam color:[UIColor purpleColor]];
  [consumerMapStyleCoordinator setPolylineStyleOptions:mutablePolylineStyleOptions
                                          polylineType:customizablePolylineType];

  // Reset polyline options to default values.
  [consumerMapStyleCoordinator setPolylineStyleOptions:nil
                                          polylineType:customizablePolylineType];
}

Polyline yang mengetahui kondisi lalu lintas

Lapisan traffic polyline dinonaktifkan secara default. Saat Anda mengaktifkannya dengan menggunakan polylineStyleOptions.isTrafficEnabled = true, segmen yang merepresentasikan rentang traffic non-normal akan digambar sebagai rute.

Kondisi lalu lintas ditampilkan sebagai salah satu dari empat kecepatan:

  • GMTSSpeedType.noData
  • GMTSSpeedType.normal
  • GMTSSpeedType.slow
  • GMTSSpeedType.trafficJam

Anda dapat menyesuaikan warna yang mewakili setiap klasifikasi kecepatan tersebut dengan menggunakan setTrafficColorFor(_:color:).