Tuỳ chỉnh hình nhiều đường

Chọn nền tảng: Android iOS JavaScript

Trước khi tuỳ chỉnh đường nhiều đoạn (hoặc điểm đánh dấu) trên tuyến đường, trước tiên, bạn cần phải khởi chạy các lựa chọn tuỳ chỉnh giao diện người dùng.

Khởi chạy các lựa chọn tuỳ chỉnh giao diện người dùng

Hàm gọi lại được đề xuất dùng để thiết lập ban đầu các lựa chọn tuỳ chỉnh giao diện người dùng được khai báo trong GMTCMapViewDelegate. Lệnh gọi lại mapViewDidInitialize sẽ được kích hoạt khi đối tượng GMTCMapView sẵn sàng hiển thị bản đồ. Trình điều phối kiểu được khởi tạo nhưng không có phần tử nào trên giao diện người dùng.

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.
}

Tuỳ chỉnh đường nhiều đoạn

Bạn có thể tuỳ chỉnh nhiều đường bằng cách dùng GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:).

Ví dụ sau đây cho thấy cách thiết lập các lựa chọn về kiểu đường nhiều đoạn:

Loại đường nhiều đoạn

Bạn có thể tuỳ chỉnh các loại đường nhiều đoạn sau:

  • GMTCPolylineType.activeRoute: Tuyến đường mà xe đang đi đến điểm tiếp theo của hành khách, cho dù đó là điểm đón hay điểm trả khách.
  • GMTCPolylineType.remainingRoute: Đoạn đường còn lại của chuyến đi sau khi xe hoàn thành GMTCPolylineType.activeRoute.

Cả hai loại này đều xuất hiện trong suốt hành trình được chia sẻ.

Thuộc tính của đường nhiều đoạn

Các thuộc tính mà bạn có thể tuỳ chỉnh cho từng đường nhiều đoạn là một tập hợp con của các thuộc tính được cung cấp trên Google Maps PolylineOptions. Các thuộc tính GMTCPolylineStyleOptions của Consumer SDK có những đặc điểm sau:

  • Được tạo bằng trình khởi tạo.
  • Có thể là bất biến hoặc có thể thay đổi nếu bạn muốn cung cấp các giá trị tuỳ chỉnh cho bất kỳ thuộc tính nào.
  • Có giá trị mặc định.

Bạn có thể tuỳ chỉnh các thuộc tính sau:

  • color
  • width
  • isVisible: Để tắt một đường nhiều đoạn, hãy đặt isVisible thành false.
  • isTrafficEnabled: Thuộc tính này được đặt thành false theo mặc định.

Ví dụ:

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];
}

Đường nhiều đoạn có thông tin giao thông

Theo mặc định, lớp lưu lượng truy cập của đường nhiều đoạn sẽ bị tắt. Khi bạn bật tính năng này bằng cách sử dụng polylineStyleOptions.isTrafficEnabled = true, các đoạn đường biểu thị những đoạn đường có lưu lượng truy cập không bình thường sẽ được vẽ dưới dạng tuyến đường.

Tình trạng giao thông được thể hiện bằng một trong 4 tốc độ:

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

Bạn có thể tuỳ chỉnh màu đại diện cho từng phân loại tốc độ đó bằng cách sử dụng setTrafficColorFor(_:color:).