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

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

Trước khi tuỳ chỉnh hình nhiều đường (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 động các lựa chọn tuỳ chỉnh giao diện người dùng

Lệnh gọi lại được đề xuất dùng để đặt các tuỳ chọn tuỳ chỉnh giao diện người dùng ban đầu đượ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ử trên 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 hình nhiều đường

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

Ví dụ sau đây cho thấy cách đặt các tuỳ chọn kiểu hình nhiều đường:

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

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

  • 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 còn lại của chuyến đi sau khi xe hoàn tất 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 đa tuyến

Các thuộc tính mà bạn có thể tuỳ chỉnh cho mỗi hình nhiều đường 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 của SDK Người 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ể 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 hình nhiều đường, 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];
}

Hình nhiều đường nhận biết tình trạng giao thông

Lớp giao thông của hình nhiều đường được tắt theo mặc định. 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 thể hiện bằng một trong bốn 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:).