Tuỳ chỉnh giao diện người dùng iOS

Khi sử dụng Consumer SDK, bạn có thể áp dụng điểm đánh dấu tuỳ chỉnh và định tuyến hình nhiều đường cho thiết kế ứng dụng của mình. Các phần tử thiết kế này cho phép Ứng dụng người tiêu dùng hiển thị bản xem trước động về tuyến đường của xe.

Hướng dẫn này mô tả các tuỳ chọn mà SDK cung cấp trong thuộc tính consumerMapStyleCoordinator. Thuộc tính này hoạt động thông qua lớp GMTCMapView. Hướng dẫn này chỉ đề cập đến các thành phần trên giao diện người dùng và giả định rằng bạn có một ứng dụng Người tiêu dùng đang hoạt động. Để biết thông tin về cách thiết lập các dịch vụ phụ trợ mà SDK người dùng cần, hãy xem nội dung Làm quen với Fleet Engine.

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 đượ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 để kết xuất bản đồ. Trình điều phối kiểu đã được khởi chạy, nhưng không có thành phầ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.
}

Điểm đánh dấu tuỳ chỉnh

Ví dụ sau đây sử dụng GMTCMapView để tuỳ chỉnh các kiểu điểm đánh dấu. Để đặt loại điểm đánh dấu và các thuộc tính của loại điểm đánh dấu đó, hãy sử dụng setMarkerStyleOptions(_:markerType:). Các tuỳ chọn điểm đánh dấu tuỳ chỉnh sẽ ghi đè các giá trị mặc định do SDK người tiêu dùng cung cấp.

Swift

/** ViewController.swift */

private func changeMarkerStyle(
  markerStyleOptions: GMTCMarkerStyleOptions?,
  markerType: GMTCCustomizableMarkerType
) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator
  styleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: markerType)
}

/** To restore the default values, call setMarkerStyleOptions(_:markerType:) using nil for the GMTCMarkerStyleOptions parameter.
Here is an example of retrieving the active GMTCMarkerStyleOptions. */

private func retrieveMarkerStyle(markerType: GMTCCustomizableMarkerType) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator

  // The 'markerStyleOptions' contains the stored style options for this marker type.
  let markerStyleOptions = styleCoordinator.markerStyleOptions(for: markerType)
}

Objective-C

/** ViewController.h */

- (void)changeMarkerStyle:(nullable GMTCMarkerStyleOptions *)markerStyleOptions
               markerType:(GMTCCustomizableMarkerType)markerType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
  [styleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:markerType];
}

/** To restore the default values, call setMarkerStyleOptions:markerStyleOptions:markerType: using nil for the GMTCMarkerStyleOptions parameter.
Here is an example of retrieving the active GMTCMarkerStyleOptions. */

- (void)retrieveMarkerStyle:(GMTCCustomizableMarkerType)markerType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;

  // The 'markerStyleOptions' contains the stored style options for this marker type.
  GMTCMarkerStyleOptions *markerStyleOptions = [styleCoordinator markerStyleOptionsForType:markerType];
}

Loại điểm đánh dấu

Các điểm đánh dấu sau đây có sẵn để tuỳ chỉnh:

• GMTCCustomizableMarkerType.unknown
• GMTCCustomizableMarkerType.tripPickupPoint
• GMTCCustomizableMarkerType.tripDropoffPoint
• GMTCCustomizableMarkerType.tripVehicle
• GMTCCustomizableMarkerType.intermediateDestination

Sử dụng GMTCCustomizableMarkerType.tripPickupPoint, GMTCCustomizableMarkerType.intermediateDestination và GMTCCustomizableMarkerType.tripDropoffPoint để tuỳ chỉnh các điểm tham chiếu trong Tiến trình đi và đặt hàng.

Sử dụng GMTCCustomizableMarkerType.tripVehicle để tuỳ chỉnh biểu tượng xe trong quá trình Chuyến đi và Tiến trình đặt hàng. Biểu tượng điểm đánh dấu không thay đổi theo loại phương tiện thực tế của chuyến đi.

Tùy chọn điểm đánh dấu

Các thuộc tính có thể tuỳ chỉnh có sẵn cho mỗi điểm đánh dấu là một nhóm nhỏ các cơ sở lưu trú do Google Maps MarkerOptions cung cấp. SDK người dùng GMTCMarkerStyleOptions được tạo bằng trình khởi tạo và không thể thay đổi được sau khi được tạo. Giá trị mặc định được cung cấp cho mỗi thuộc tính, vì vậy, bạn chỉ cần chỉ định giá trị tuỳ chỉnh.

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

• groundAnchor
• isVisible
• iconView
• icon
• zIndex
• isFlat

Việc đặt isVisible thành false tương đương với việc "tắt" điểm đánh dấu. Bạn cần cung cấp đủ dữ liệu để có thể sử dụng thành phần trên giao diện người dùng của riêng mình.

Ví dụ:

Swift

/** MapViewController.swift */

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

  // The marker type that you would like to set custom UI options for.
  let customizableMarkerType = GMTCCustomizableMarkerType.tripVehicle

  // Initializing marker options.
  let markerStyleOptions = GMTCMutableMarkerStyleOptions()
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor
  markerStyleOptions.icon = icon
  markerStyleOptions.zIndex = 100
  markerStyleOptions.isFlat = false
  markerStyleOptions.isVisible = true

  consumerMapStyleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: customizableMarkerType)

  // Reset marker options to default values.
  consumerMapStyleCoordinator.setMarkerStyleOptions(nil, markerType: customizableMarkerType)
}

Objective-C

/** MapViewController.m */

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

  // The marker type that you would like to set custom UI options for.
  GMTCCustomizableMarkerType customizableMarkerType = GMTCCustomizableMarkerTypeTripVehicle;

  // Initializing marker options.
  GMTCMutableMarkerStyleOptions *markerStyleOptions =
      [[GMTCMutableMarkerStyleOptions alloc] init];
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor;
  markerStyleOptions.icon = icon;
  markerStyleOptions.zIndex = 100;
  markerStyleOptions.isFlat = NO;
  markerStyleOptions.isVisible = YES;

  [consumerMapStyleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:customizableMarkerType];

  // Reset marker options to default values.
  [consumerMapStyleCoordinator setMarkerStyleOptions:nil markerType:customizableMarkerType];
}

Nội dung cập nhật linh động về ETA cho điểm đánh dấu đón khách

Để tạo một điểm đánh dấu đến lấy hàng tự động hiển thị ETA đã cập nhật theo định kỳ, hãy cập nhật các lựa chọn kiểu điểm đánh dấu cho GMTCCustomizableMarkerType.tripPickupPoint.

Ví dụ:

Swift

/** MapViewController.swift */

/// Updates the ETA every minute by creating a Timer that repeats every minute.
private func schedulePickupMarkerStyleUpdates() {
  Timer.scheduledTimer(
    timeInterval: 60.0,  // Update marker ETA every minute.
    target: self,
    selector: #selector(updatePickupMarkerETA),
    userInfo: nil,
    repeats: true)
}

/// Updates the marker options for GMTCCustomizableMarkerType.tripPickupPoint for the current time.
@objc private func updatePickupMarkerETA() {
  let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator
  let previousOptions = consumerMapStyleCoordinator.markerStyleOptions(for: .tripPickupPoint)

  // Get updated ETA icon.
  let updatedETAIcon = pickupIconForCurrentTime()

  let markerStyleOptions = GMTCMutableMarkerStyleOptions()
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor
  markerStyleOptions.icon = updatedETAIcon
  markerStyleOptions.zIndex = 100
  markerStyleOptions.isFlat = false
  markerStyleOptions.isVisible = true

  consumerMapStyleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: .tripPickupPoint)
}

Objective-C

/** MapViewController.m */

/** Updates the ETA every minute by creating an NSTimer that repeats every minute. */
- (void)schedulePickupMarkerStyleUpdates {
  [NSTimer scheduledTimerWithTimeInterval:60.0 // Update marker ETA every minute.
                                   target:self
                                 selector:@selector(updatePickupMarkerETA)
                                 userInfo:nil
                                  repeats:YES];
}

/** Updates the marker options for GMTCCustomizableMarkerTypeTripPickupPoint for the current time. */
- (void)updatePickupMarkerETA {
  GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];
  GMTCMarkerStyleOptions *previousOptions = [consumerMapStyleCoordinator markerStyleOptionsForType:GMTCCustomizableMarkerTypeTripPickupPoint];

  // Get updated ETA icon.
  UIImage *updatedETAIcon = [self pickupIconForCurrentTime];

  GMTCMutableMarkerStyleOptions *markerStyleOptions =
                               [[GMTCMutableMarkerStyleOptions alloc] init];
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor;
  markerStyleOptions.icon = updatedETAIcon;
  markerStyleOptions.zIndex = 100;
  markerStyleOptions.isFlat = NO;
  markerStyleOptions.isVisible = YES;

  [consumerMapStyleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:GMTCCustomizableMarkerTypeTripPickupPoint];
}

Hình nhiều đường tuỳ chỉnh

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

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

Swift

/** ViewController.swift */

private func changePolylineStyleOptions(
  polylineStyleOptions: GMTCPolylineStyleOptions?,
  polylineType: GMTCPolylineType
) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator
  styleCoordinator.setPolylineStyleOptions(polylineStyleOptions, polylineType: polylineType)
}

/* Setting custom polyline options will override the default values provided by the Consumer SDK.
The default values can be restored by calling setPolylineStyleOptions(_:polylineType:) with nil for the GMTCPolylineStyleOptions.
The active GMTCPolylineStyleOptions can be retrieved via */

private func retrievePolylineStyleOptions(for polylineType: GMTCPolylineType) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator

  // The 'polylineStyleOptions' contains the stored style options for this polyline type.
  let polylineStyleOptions = styleCoordinator.polylineStyleOptions(for: polylineType)
}

Objective-C

/** ViewController.h */

- (void)changePolylineStyleOptions:(nullable GMTCPolylineStyleOptions *)polylineStyleOptions
                      polylineType:(GMTCPolylineType)polylineType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
  [styleCoordinator setPolylineStyleOptions:polylineStyleOptions polylineType:polylineType];
}

/* Setting custom polyline options will override the default values provided by the Consumer SDK.
The default values can be restored by calling setPolylineStyleOptions:polylineType: with nil for the GMTCPolylineStyleOptions.
The active GMTCPolylineStyleOptions can be retrieved via */

- (void)retrievePolylineStyleOptionsForType:(GMTCPolylineType)polylineType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;

  // The 'polylineStyleOptions' contains the stored style options for this polyline type.
  GMTCPolylineStyleOptions *polylineStyleOptions = [styleCoordinator polylineStyleOptionsForType:polylineType];
}

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
• GMTCPolylineType.remainingRoute

GMTCPolylineType.activeRoute và GMTCPolylineType.remainingRoute được hiển thị trong suốt Chuyến đi và Tiến trình đặt hàng. GMTCPolylineType.activeRoute là 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 khách hay trả xe. GMTCPolylineType.remainingRoute là đoạn còn lại của chuyến đi sau khi xe hoàn thành GMTCPolylineType.activeRoute.

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

Các thuộc tính có thể tuỳ chỉnh dành cho mỗi hình nhiều đường là một tập hợp con các thuộc tính được cung cấp trên Google Maps PolylineOptions. GMTCPolylineStyleOptions của SDK người dùng được tạo bằng trình khởi chạy. Các thuộc tính này có thể là không thể thay đổi hoặc thay đổi được nếu bạn muốn cung cấp giá trị tuỳ chỉnh cho mọi thuộc tính. Hệ thống sẽ cung cấp giá trị mặc định cho từng thuộc tính.

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

• color
• width
• isVisible
• isTrafficEnabled

Việc đặt isVisible thành false tương đương với việc tắt hình nhiều đường. Theo mặc định, isTrafficEnabled được thiết lập thành false.

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.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.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 giao thông

Theo mặc định, lớp giao thông của hình nhiều đường bị vô hiệu. Khi bạn bật tính năng này bằng polylineStyleOptions.isTrafficEnabled = true, các phân đoạn đại diện cho các mức căng của 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ị dưới dạng một trong 4 tốc độ: GMTSSpeedType.noData, GMTSSpeedType.normal, GMTSSpeedType.slow và GMTSSpeedType.trafficJam. Bạn có thể tuỳ chỉnh màu biểu thị từng phân loại tốc độ đó bằng setTrafficColorFor(_:color:).