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 chạy các tuỳ chọn tuỳ chỉnh giao diện người dùng

Lệnh gọi lại đề xuất dùng để đặt các tuỳ chọn tuỳ chỉnh giao diện người dùng ban đầu sẽ được khai báo trong GMTCMapViewDelegate. mapViewDidInitialize lệnh gọi lại được kích hoạt khi đối tượng GMTCMapView đã sẵn sàng kết xuất 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 hình nhiều đường

Chế độ tuỳ chỉnh hình nhiều đường được đặt bằ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:

Loại hình nhiều đường

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

  • GMTCPolylineType.activeRoute: Tuyến đường mà xe đang đi đến điểm tiếp theo của người lái, cho dù đó là điểm đón hoặc trả xe.
  • GMTCPolylineType.remainingRoute: Đoạn đường 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 hiển thị trong suốt một hành trình chung.

Thuộc tính hình nhiều đường

Các thuộc tính mà bạn có thể tuỳ chỉnh cho mỗi hình nhiều đường là tập con của các cơ sở lưu trú được cung cấp trên Google Maps PolylineOptions. SDK dành cho người tiêu dùng GMTCPolylineStyleOptions thuộc tính 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 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 lưu lượng truy cập

Theo mặc định, lớp giao thông của hình nhiều đường bị vô hiệu hoá. Khi bạn bật chế độ này bằng cách sử dụng polylineStyleOptions.isTrafficEnabled = true, các phân đoạn biểu thị cho những đoạn giao thông không bình thường được vẽ làm tuyến đường.

Tình trạng giao thông được biểu thị dưới dạ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 phân loại tốc độ đó bằng cách sử dụng setTrafficColorFor(_:color:).