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

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

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

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

Lệnh gọi lại được đề xuất dùng để thiết lập ban đầu các tuỳ 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 đượ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 chạy nhưng không có phần tử giao diện người dùng nào.

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 đa tuyến

Bạn có thể thiết lập tuỳ chỉnh đường đa tuyến bằng cách sử dụng GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:).

Ví dụ sau đây cho thấy cách thiết lập các tuỳ chọn kiểu đường đa tuyến:

Các loại hình nhiều đường

Bạn có thể tuỳ chỉnh các loại đường đa tuyến sau:

  • GMTCPolylineType.activeRoute: Tuyến đường mà xe đang đi đến điểm tiếp theo của người đi xe, cho dù đó là điểm đón hay điểm trả khách.
  • GMTCPolylineType.remainingRoute: Phần 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 chia sẻ.

Thuộc tính đường đa tuyến

Các thuộc tính mà bạn có thể tuỳ chỉnh cho từng đa tuyế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 SDK tiêu dùng GMTCPolylineStyleOptions có các đặc điểm sau:

  • Được tạo bằng trình khởi tạo.
  • Có thể là không thể thay đổi hoặc có thể thay đổi nếu bạn muốn cung cấp 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 đa tuyế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 đa tuyến có nhận biết được lưu lượng truy cập

Theo mặc định, lớp lưu lượng truy cập của đường đa tuyế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 đại diện cho các đoạn 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 biểu thị 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 loại tốc độ đó bằng cách sử dụng setTrafficColorFor(_:color:).