ปรับแต่งเส้นประกอบเส้นทาง

เลือกแพลตฟอร์ม Android iOS JavaScript

ก่อนปรับแต่งเส้นประกอบของเส้นทาง (หรือเครื่องหมาย) คุณต้องเริ่มต้นตัวเลือกการปรับแต่ง UI ก่อน

เริ่มต้นตัวเลือกการปรับแต่ง UI

Callback ที่แนะนําซึ่งใช้เพื่อตั้งค่าตัวเลือกการปรับแต่ง UI ในตอนแรกจะประกาศใน GMTCMapViewDelegate ระบบจะเรียกใช้ mapViewDidInitialize callback เมื่อออบเจ็กต์ GMTCMapView พร้อมที่จะแสดงผลแผนที่ เริ่มต้นใช้งานผู้ประสานงานสไตล์แล้ว แต่ไม่มีองค์ประกอบ UI ใดๆ ปรากฏอยู่

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.
}

ปรับแต่งเส้นประกอบ

การตั้งค่าการปรับแต่งเส้นประกอบทำได้โดยใช้ GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:)

ตัวอย่างต่อไปนี้แสดงวิธีตั้งค่าตัวเลือกรูปแบบเส้นประกอบ

ประเภทเส้นประกอบ

คุณปรับแต่งเส้นประกอบประเภทต่อไปนี้ได้

• GMTCPolylineType.activeRoute: เส้นทางที่ยานพาหนะกำลังใช้เพื่อไปยังจุดหมายถัดไปของผู้ขับขี่ ไม่ว่าจะเป็นจุดรับหรือจุดส่ง
• GMTCPolylineType.remainingRoute: ส่วนการเดินทางที่เหลืออยู่หลังจากยานพาหนะทำGMTCPolylineType.activeRouteเสร็จสมบูรณ์

โฆษณาทั้ง 2 ประเภทนี้จะแสดงตลอดเส้นทางที่แชร์

คุณสมบัติของเส้นประกอบ

พร็อพเพอร์ตี้ที่คุณปรับแต่งได้สำหรับเส้นประกอบแต่ละเส้นคือพร็อพเพอร์ตี้ย่อยของพร็อพเพอร์ตี้ที่มีให้ใน Google Maps PolylineOptions พร็อพเพอร์ตี้ Consumer SDK GMTCPolylineStyleOptions มีลักษณะต่อไปนี้

• สร้างโดยใช้ตัวเริ่มต้น
• อาจเป็นค่าแบบคงที่หรือแบบเปลี่ยนแปลงได้หากคุณต้องการระบุค่าที่กำหนดเองสำหรับพร็อพเพอร์ตี้ใดก็ได้
• มีค่าเริ่มต้น

คุณปรับแต่งพร็อพเพอร์ตี้ต่อไปนี้ได้

• color
• width
• isVisible: หากต้องการปิดใช้เส้นประกอบ ให้ตั้งค่า isVisible เป็น false
• isTrafficEnabled: ระบบจะตั้งค่าพร็อพเพอร์ตี้นี้เป็น false โดยค่าเริ่มต้น

ตัวอย่าง

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

เส้นประกอบที่คำนึงถึงการจราจร

เลเยอร์การจราจรของเส้นประกอบจะปิดอยู่โดยค่าเริ่มต้น เมื่อเปิดใช้ตัวเลือกนี้โดยใช้ polylineStyleOptions.isTrafficEnabled = true ระบบจะวาดส่วนของเส้นทางที่แสดงถึงช่วงที่มีการเข้าชมที่ผิดปกติ

สภาพการจราจรจะแสดงเป็นความเร็วอย่างใดอย่างหนึ่งต่อไปนี้

• GMTSSpeedType.noData
• GMTSSpeedType.normal
• GMTSSpeedType.slow
• GMTSSpeedType.trafficJam

คุณปรับแต่งสีที่แสดงถึงการจัดประเภทความเร็วแต่ละประเภทได้โดยใช้ setTrafficColorFor(_:color:)