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

Khi sử dụng SDK người tiêu dùng, bạn có thể áp dụng điểm đánh dấu tuỳ chỉnh và định tuyến hình nhiều đường đến thiết kế ứng dụng của bạn. Các phần tử thiết kế này cho phép 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. Tài sản này được cung cấp qua lớp GMTCMapView. Nó chỉ bao gồm 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 tiêu dùng chức năng. Để biết thông tin về cách thiết lập phần phụ trợ các dịch vụ mà SDK người tiêu dùng cần, hãy xem Bắt đầu sử dụng 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 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.
}

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

Ví dụ sau đây sử dụng GMTCMapView để tuỳ chỉnh 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 cho điểm đánh dấu tuỳ chỉnh của bạn 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];
}

Các loại điểm đánh dấu

Bạn có thể tuỳ chỉnh các điểm đánh dấu sau:

  • 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 khoảng thời gian Tiến trình đặt hàng và chuyến đi.

Dùng GMTCCustomizableMarkerType.tripVehicle để tuỳ chỉnh biểu tượng xe trong quá trình đi và quá trình đặt hàng. Biểu tượng điểm đánh dấu không thay đổi theo loại xe thực tế cho 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à tập hợp con của cơ sở lưu trú do Google Maps cung cấp MarkerOptions. SDK dành cho người tiêu dùng GMTCMarkerStyleOptions được tạo bằng trình khởi tạo và không thể thay đổi sau khi 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 các 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 "tắt" điểm đánh dấu. Bạn phải 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 ở đúng vị trí.

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

Thông tin cập nhật linh động về thời gian đến dự kiến cho điểm đánh dấu đến lấy hàng

Để tạo một điểm đánh dấu đến lấy hàng nhằm tự động hiển thị ETA đã cập nhật theo định kỳ, cập nhật tùy 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

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:

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 Hành trình và Tiến trình đặt hàng. GMTCPolylineType.activeRoute là tuyến đường mà xe đi đến điểm tiếp theo mà tài xế đang lái xe đến lấy hàng hoặc trả xe. GMTCPolylineType.remainingRoute là phân đoạn của chuyến đi còn lại sau khi xe hoàn tất GMTCPolylineType.activeRoute.

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

Các thuộc tính có thể tuỳ chỉnh có sẵn 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. của SDK người tiêu dùng GMTCPolylineStyleOptions được tạo bằng trình khởi tạo. Chúng có thể là bất biến hoặc dễ thay đổi nếu bạn muốn để cung cấp giá trị tuỳ chỉnh cho mọi thuộc tính. Giá trị mặc định được cung cấp cho mỗi cơ sở lưu trú.

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 đặt 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 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á. Thời điểm bật với polylineStyleOptions.isTrafficEnabled = true, các phân khúc đại diện 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ị bằng một trong bốn tốc độ: GMTSSpeedType.noData, GMTSSpeedType.normal, GMTSSpeedType.slow và GMTSSpeedType.trafficJam. Bạn có thể tuỳ chỉnh màu đại diện cho từng phân loại tốc độ này cùng với setTrafficColorFor(_:color:).