แก้ไข UI การนําทาง

เมื่อใช้ Navigation SDK สำหรับ iOS คุณสามารถปรับเปลี่ยนประสบการณ์ของผู้ใช้กับแผนที่ได้โดยกำหนดว่าตัวควบคุม UI และองค์ประกอบในตัวใดจะปรากฏบนแผนที่ และท่าทางสัมผัสใดที่คุณอนุญาต นอกจากนี้ คุณยังแก้ไขลักษณะที่ปรากฏของ UI การนำทางได้ด้วย ดูหลักเกณฑ์เกี่ยวกับการแก้ไข UI การนำทางที่ยอมรับได้ในหน้านโยบาย

ตัวควบคุม UI ของแผนที่

Navigation SDK มีตัวควบคุม UI ในตัวบางอย่างที่คล้ายกับที่พบในแอปพลิเคชัน Google Maps สำหรับ iOS คุณสลับการแสดงผลของการควบคุมเหล่านี้ได้โดยใช้คลาส GMSUISettings การเปลี่ยนแปลงที่คุณทำในคลาสนี้จะแสดงในแผนที่ทันที

เข็มทิศ

Navigation SDK มีกราฟิกเข็มทิศที่ปรากฏที่มุมขวาบนของแผนที่ในบางสถานการณ์และเฉพาะเมื่อเปิดใช้เท่านั้น เมื่อผู้ใช้แตะเข็มทิศ กล้องจะเคลื่อนไหวกลับไปยังตำแหน่งที่มีทิศทางเป็นศูนย์ (การวางแนวเริ่มต้น) และเข็มทิศจะค่อยๆ หายไปหลังจากนั้นไม่นาน

หากเปิดใช้การนำทางและตั้งค่าโหมดกล้องเป็น "ติดตาม" เข็มทิศจะยังคงปรากฏอยู่ และการแตะเข็มทิศจะเป็นการสลับระหว่างมุมมองกล้องแบบเอียงและแบบภาพรวม

เพื่อหลีกเลี่ยงการเสียสมาธิของผู้ขับ เข็มทิศจะยังคงอยู่ในตำแหน่งเดิมหากส่วนหัว (ในโหมดภาพบุคคล) ขยายและขัดแย้งกับตำแหน่งเริ่มต้นของเข็มทิศ หากคุณเพิ่มการควบคุมที่กำหนดเองของส่วนหัวรองหรือมุมมองอุปกรณ์เสริมของส่วนหัว เข็มทิศจะถูกซ่อนเพื่อหลีกเลี่ยงความขัดแย้งของ UI

เข็มทิศรองรับโหมดกลางวันและกลางคืน รวมถึงโหมดมืด

เข็มทิศจะเปิดใช้อยู่โดยค่าเริ่มต้นในเวอร์ชัน 11.0.0 ขึ้นไป คุณปิดใช้เข็มทิศได้โดยตั้งค่าพร็อพเพอร์ตี้ compassButton ของ GMSUISettings เป็น false

mapView.settings.compassButton = false

mapView.settings.compassButton = NO;

ปุ่มตำแหน่งของฉัน

ปุ่มตำแหน่งของฉันจะปรากฏที่มุมขวาล่างของหน้าจอเท่านั้นเมื่อเปิดใช้ปุ่มตำแหน่งของฉัน เมื่อผู้ใช้คลิกปุ่ม กล้องจะเคลื่อนไหวเพื่อโฟกัสที่ตำแหน่งปัจจุบันของผู้ใช้ หากทราบตำแหน่งของผู้ใช้ คุณเปิดใช้ปุ่มได้โดยตั้งค่าพร็อพเพอร์ตี้ myLocationButton ของ GMSUISettings เป็น true

mapView.settings.myLocationButton = true

mapView.settings.myLocationButton = YES;

ปุ่มปรับศูนย์กลาง

เมื่อเปิดใช้การนำทาง ปุ่มจัดกึ่งกลางใหม่จะปรากฏขึ้นเมื่อผู้ใช้เลื่อนมุมมองแผนที่ และจะหายไปเมื่อผู้ใช้แตะเพื่อจัดกึ่งกลางแผนที่ใหม่ หากต้องการให้ปุ่มจัดตำแหน่งใหม่ปรากฏขึ้น ให้ตั้งค่าพร็อพเพอร์ตี้ recenterButtonEnabled ของ GMSUISettings เป็น true หากต้องการป้องกันไม่ให้ปุ่มจัดให้อยู่กึ่งกลางปรากฏขึ้น ให้ตั้งค่า recenterButtonEnabled เป็น false

mapView.settings.isRecenterButtonEnabled = true

mapView.settings.recenterButtonEnabled = YES;

อุปกรณ์เสริม UI ของแผนที่

Navigation SDK มีอุปกรณ์เสริม UI ที่ปรากฏระหว่างการนำทางซึ่งคล้ายกับที่พบในแอปพลิเคชัน Google Maps สำหรับ iOS คุณสามารถปรับระดับการมองเห็นหรือลักษณะที่ปรากฏของตัวควบคุมเหล่านี้ได้ตามที่อธิบายไว้ในส่วนนี้ การเปลี่ยนแปลงที่คุณทำที่นี่จะแสดงในระหว่างการเดินทางครั้งถัดไปของผู้ใช้

ส่วนหัวและส่วนท้ายของการนำทาง

ในระหว่างการนำทาง ส่วนหัวของการนำทางจะปรากฏที่ด้านบนของหน้าจอ และส่วนท้ายของการนำทางจะปรากฏที่ด้านล่าง ส่วนหัวของการนำทางจะแสดงชื่อถนนและทิศทางสำหรับการเลี้ยวถัดไปในเส้นทาง รวมถึงทิศทางของการเลี้ยวถัดไป ส่วนท้ายของการนำทางจะแสดงเวลาและระยะทางโดยประมาณไปยังจุดหมาย รวมถึงเวลาถึงโดยประมาณ

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

• navigationHeaderEnabled - ควบคุมว่าจะแสดงส่วนหัวการนำทางหรือไม่ (ค่าเริ่มต้นคือ true)
• navigationFooterEnabled - ควบคุมว่าจะแสดงส่วนท้ายของการนำทางหรือไม่ (ค่าเริ่มต้นคือ true)
• navigationHeaderPrimaryBackgroundColor - ตั้งค่าสีพื้นหลังหลักสำหรับส่วนหัวของการนำทาง
• navigationHeaderSecondaryBackgroundColor - ตั้งค่าสีพื้นหลังรองสำหรับส่วนหัวของการนำทาง

ตัวอย่างโค้ดต่อไปนี้แสดงการเปิดการแสดงผลสำหรับส่วนหัวและส่วนท้าย จากนั้นตั้งค่า navigationHeaderPrimaryBackgroundColor เป็นสีน้ำเงิน และ navigationHeaderSecondaryBackgroundColor เป็นสีแดง

mapView.settings.isNavigationHeaderEnabled = true
mapView.settings.isNavigationFooterEnabled = true
mapView.settings.navigationHeaderPrimaryBackgroundColor = .blue
mapView.settings.navigationHeaderSecondaryBackgroundColor = .red

mapView.settings.navigationHeaderEnabled = YES;
mapView.settings.navigationFooterEnabled = YES;
mapView.settings.navigationHeaderPrimaryBackgroundColor = [UIColor blueColor];
mapView.settings.navigationHeaderSecondaryBackgroundColor = [UIColor redColor];

มุมมองส่วนหัวของอุปกรณ์เสริมสำหรับการนำทาง

คุณปรับแต่งแอปได้โดยแทนที่มุมมองส่วนหัวของการนำทางรองด้วยมุมมองอุปกรณ์เสริมที่ปรับแต่งเอง ซึ่งทำได้โดยการสร้างมุมมองที่ใช้โปรโตคอล GMSNavigationAccessoryView โปรโตคอลนี้มีเมธอดที่จำเป็น 1 เมธอดคือ -heightForAccessoryViewConstrainedToSize:onMapView: คุณจะได้รับขนาดสูงสุดที่ใช้ได้สำหรับมุมมองของคุณใน mapView ที่ระบุ และคุณต้องระบุความสูงที่มุมมองของคุณต้องการ

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

หากต้องการนำมุมมองอุปกรณ์เสริมส่วนหัวที่กำหนดเองออก ให้ส่ง nil ไปยัง setHeaderAccessoryView:

หากมุมมองต้องเปลี่ยนขนาดเมื่อใดก็ตาม คุณสามารถเรียกใช้ invalidateLayoutForAccessoryView: โดยส่งมุมมองที่ต้องเปลี่ยนขนาดเข้าไป

ตัวอย่าง

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

class MyCustomView: UIView, GMSNavigationAccessoryView {
…
  func heightForAccessoryViewConstrained(to size: CGSize, on mapView: GMSMapView) -> CGFloat {
    // viewHeight gets calculated as the height your view needs.
    return viewHeight
  }
…
}

let customView = MyCustomView(...)
mapView.setHeaderAccessory(customView)

// At some later point customView changes size.
mapView.invalidateLayout(forAccessoryView: customView)

// Remove the custom header accessory view.
mapView.setHeaderAccessory(nil)

@interface MyCustomView : UIView <GMSNavigationAccessoryView>
…
@end

@implementation MyCustomView
…
- (CGFloat)heightForAccessoryViewConstrainedToSize:(CGSize)size onMapView:(GMSMapView *)mapView {
  // viewHeight gets calculated as the height your view needs.
  return viewHeight;
}
…
@end

MyCustomView *customView = [[MyCustomView alloc] init…];
[_mapView setHeaderAccessoryView:customView];

// At some later point customView changes size.
[_mapView invalidateLayoutForAccessoryView:customView];

// Remove the custom header accessory view.
[_mapView setHeaderAccessoryView:nil];

สีส่วนหัวของโหมดแสงน้อย

Navigation SDK สำหรับ iOS จะคำนวณโหมดแสงที่แนะนำตามช่วงเวลาของวันและตำแหน่งปัจจุบันของอุปกรณ์ และเรียกใช้เมธอด Listener GMSNavigatorListener.didChangeSuggestedLightingMode เมื่อโหมดที่แนะนำมีการเปลี่ยนแปลง (เช่น เมื่อพระอาทิตย์ขึ้นหรือพระอาทิตย์ตก) คุณสามารถแก้ไขลักษณะการทำงานของโหมดแสงน้อยแบบเป็นโปรแกรมได้ด้วยวิธีต่อไปนี้

• ควบคุมเวลาที่แผนที่จะใช้โหมดปกติและโหมดแสงน้อยโดยตั้งค่า GMSMapView.lightingMode เป็นค่า GMSNavigationLightingMode ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปิดใช้การเปลี่ยนโหมดแสงอัตโนมัติได้ที่หัวข้อกำหนดค่าโหมดปกติและโหมดแสงน้อย
• ปรับแต่งสีพื้นหลังหลักและรองของส่วนหัวการนำทางในโหมดแสงน้อยโดยตั้งค่าพร็อพเพอร์ตี้ navigationHeaderPrimaryBackgroundColorNightMode และ navigationHeaderSecondaryBackgroundColorNightMode ใน GMSUISettings

รายการเส้นทาง

คุณสามารถระบุเส้นทางแบบทีละขั้นตอนในแอปได้ ตัวอย่างต่อไปนี้แสดงวิธีหนึ่งที่เป็นไปได้ในการดำเนินการนี้ ขั้นตอนเหล่านี้อาจแตกต่างกันไปตามการติดตั้งใช้งานของคุณเอง

1. เปิดใช้ปุ่มจุดแรกเข้าหลังจากที่ setDestinations ใน GMSNavigator (Navigator) เสร็จสมบูรณ์และเปิดใช้ guidanceActive ใน Navigator แล้ว
2. เมื่อผู้ใช้แตะปุ่มจุดแรกเข้า ให้สร้าง GMSNavigationDirectionsListController (ตัวควบคุม) ด้วยเครื่องมือนำทางที่เชื่อมโยงกับ GMSMapView (mapView)
3. เพิ่มตัวควบคุมลงในอินสแตนซ์ของ UIViewController (ตัวควบคุมมุมมอง) และเพิ่ม directionsListView เป็นมุมมองย่อยของตัวควบคุมมุมมอง ควรเรียกใช้เมธอด reloadData และ invalidateLayout ในตัวควบคุมเหมือนกับที่เรียกใช้ด้วย UICollectionView
4. พุชตัวควบคุมมุมมองไปยังลำดับชั้นตัวควบคุมมุมมองของแอป

ตัวอย่างโค้ดต่อไปนี้แสดงการเพิ่ม DirectionsListViewController

override func viewDidLoad() {
  super.viewDidLoad()
  // Add the directionsListView to the host view controller's view.
  let directionsListView = directionsListController.directionsListView
  directionsListView.frame = self.view.frame
  self.view.addSubview(directionsListView)
  directionsListView.translatesAutoresizingMaskIntoConstraints = false
  directionsListView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
  directionsListView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
  directionsListView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
  directionsListView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
  ...
}

override func viewWillAppear(_ animated: Bool) {
  super.viewWillAppear(animated)
  // Make sure data is fresh when the view appears.
  directionsListController.reloadData()
  ...
}

override func willTransition(to newCollection: UITraitCollection, with coordinator: UIViewControllerTransitionCoordinator) {
  super.willTransition(to: newCollection, with: coordinator)
  // Invalidate the layout during rotation.
  coordinator.animate(alongsideTransition: {_ in
    self.directionsListController.invalidateLayout()
  })
  ...
}

- (void)viewDidLoad {
  [super viewDidLoad];
  // Add the directionsListView to the host view controller's view.
  UIView *directionsListView = _directionsListController.directionsListView;
  directionsListView.frame = self.view.bounds;
  [self.view addSubview:directionsListView];
  directionsListView.translatesAutoresizingMaskIntoConstraints = NO;
  [directionsListView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
  [directionsListView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor].active = YES;
  [directionsListView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor].active = YES;
  [directionsListView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
  ...
}

- (void)viewWillAppear:(BOOL)animated {
  [super viewWillAppear:animated];
  // Make sure data is fresh when the view appears.
  [_directionsListController reloadData];
  ...
}

- (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection
              withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [super willTransitionToTraitCollection:newCollection withTransitionCoordinator:coordinator];
  void(^animationBlock)(id <UIViewControllerTransitionCoordinatorContext>context) =
      ^void(id <UIViewControllerTransitionCoordinatorContext>context) {
    [_directionsListController invalidateLayout];
  };
  // Invalidate the layout during rotation.
  [coordinator animateAlongsideTransition:animationBlock
                               completion:nil];
  ...
}

...

แถบความคืบหน้าของการเดินทาง

แถบความคืบหน้าของการเดินทางคือแถบแนวตั้งที่ปรากฏที่ด้านเริ่มต้น/ด้านนำของแผนที่เมื่อการนำทางเริ่มต้นขึ้น เมื่อเปิดใช้ ฟีเจอร์นี้จะแสดงภาพรวมของการเดินทางทั้งหมด พร้อมกับจุดหมายและตำแหน่งปัจจุบันของผู้ใช้

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

แถบความคืบหน้าของการเดินทางจะแสดงสัญญาณบอกสถานะต่อไปนี้

• สถานะการจราจร - สถานะการจราจรที่กำลังจะเกิดขึ้น

• ตำแหน่งปัจจุบัน - ตำแหน่งปัจจุบันของคนขับในการเดินทาง

• เส้นทางที่ผ่านไปแล้ว - ส่วนของการเดินทางที่ผ่านไปแล้ว

เปิดใช้แถบความคืบหน้าของการเดินทางโดยตั้งค่าพร็อพเพอร์ตี้ navigationTripProgressBarEnabled ใน GMSUISettings

mapView.settings.isNavigationTripProgressBarEnabled = true

mapView.settings.navigationTripProgressBarEnabled = YES;

การจัดตำแหน่งแถบความคืบหน้าของการเดินทาง

• ด้านซ้ายของแถบจะตรงกับด้านซ้ายของมาตรวัดความเร็ว โลโก้ Google และปุ่มจัดให้อยู่กึ่งกลาง (เมื่อมองเห็น) โดยประมาณ ความกว้างคือ 12 pt
• แถบความคืบหน้าของการเดินทางจะตอบสนองแบบไดนามิกตามพื้นที่แนวตั้งบนหน้าจอ ด้านล่างของแถบอยู่ห่างจากด้านล่างของหน้าจอ 210 pt ด้านบนของแถบความคืบหน้าของการเดินทางจะอยู่ห่างจากด้านบนของหน้าจออย่างน้อย 170 pt และความสูงสูงสุดของแถบคือ 400 pt
• หากแถบความคืบหน้าของการเดินทางซ้อนทับกับส่วนหัวของการนำทางหรือองค์ประกอบ UI อื่นๆ ของการนำทาง แถบความคืบหน้าจะปรากฏใต้องค์ประกอบอื่นๆ เหล่านั้น

Prompt Visibility API (เวอร์ชันทดลอง)

Prompt Visibility API ช่วยให้คุณหลีกเลี่ยงความขัดแย้งระหว่างองค์ประกอบ UI ที่สร้างโดย Navigation SDK กับองค์ประกอบ UI ที่คุณกำหนดเองได้โดยการเพิ่ม Listener เพื่อรับ Callback ก่อนที่องค์ประกอบ UI ของ Navigation SDK จะปรากฏขึ้นและทันทีที่นำองค์ประกอบออก ดูข้อมูลเพิ่มเติม รวมถึงตัวอย่างโค้ดได้ที่ส่วน Prompt Visibility API ของหน้ากำหนดค่าการหยุดชะงักแบบเรียลไทม์

การควบคุมมาตรวัดความเร็ว

เมื่อเปิดใช้การนำทางและตั้งค่าโหมดการเดินทางเป็นขับรถ Navigation SDK สำหรับ iOS จะแสดงตัวควบคุมขีดจำกัดความเร็วที่มุมด้านล่างของแผนที่ซึ่งแสดงขีดจำกัดความเร็วปัจจุบัน เมื่อคนขับขับรถเกินขีดจำกัดความเร็ว การควบคุมจะขยายเพื่อแสดงมาตรวัดความเร็วที่ 2 พร้อมความเร็วปัจจุบันของคนขับ

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

หากต้องการแสดงการควบคุมขีดจำกัดความเร็ว ให้ตั้งค่าพร็อพเพอร์ตี้ shouldDisplaySpeedometer ของ GMSUISettings เป็น true หากต้องการปิดใช้การแสดงการควบคุมขีดจำกัดความเร็ว ให้ตั้งค่า shouldDisplaySpeedometer เป็น false

mapView.settings.shouldDisplaySpeedometer = true

mapView.settings.shouldDisplaySpeedometer = YES;

ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าการแจ้งเตือนสำหรับมาตรวัดความเร็วได้ที่กำหนดค่าการแจ้งเตือนมาตรวัดความเร็ว

เครื่องหมายปลายทาง

คุณสามารถแสดงหรือซ่อนเครื่องหมายปลายทางสำหรับเส้นทางที่กำหนดได้โดยตั้งค่าพร็อพเพอร์ตี้ showsDestinationMarkers ของ GMSUISettings ตัวอย่างต่อไปนี้แสดงการปิดเครื่องหมายปลายทาง

mapView.settings.showsDestinationMarkers = false

mapView.settings.showsDestinationMarkers = NO;

ฟีเจอร์ประสบการณ์การใช้งานแผนที่

Navigation SDK ช่วยให้คุณปรับแต่งประสบการณ์การนำทางสำหรับผู้ใช้ได้มากขึ้น การเปลี่ยนแปลงที่คุณทำกับอินสแตนซ์จะแสดงในระหว่างการอัปเดตแอปครั้งถัดไปของผู้ใช้

การไฮไลต์จุดหมายและทางเข้า

เมื่อสร้างจุดหมายด้วย placeID ระบบจะไฮไลต์อาคารจุดหมายและแสดงไอคอนทางเข้าทุกครั้งที่ทำได้ สัญญาณภาพเหล่านี้ช่วยให้ผู้ใช้แยกแยะและไปยังปลายทางที่ต้องการได้

หากต้องการสร้างปลายทางด้วย placeID ให้ใช้หนึ่งในตัวเริ่มต้น GMSNavigationWaypoint ที่ยอมรับ placeID ตัวอย่างเช่น จุดหมายที่สร้างขึ้นในบทแนะนำการนำทางตามเส้นทางจะมีการไฮไลต์จุดหมายและป้ายกำกับทางเข้าเมื่อพร้อมใช้งาน

การแสดงสิ่งปลูกสร้าง 3 มิติระหว่างการนำทาง

ระบบจะแสดงสิ่งปลูกสร้าง 3 มิติระหว่างการนำทางโดยค่าเริ่มต้น หากต้องการปิดใช้ฟีเจอร์นี้ ให้ตั้งค่า buildingsEnabled เป็น false (Swift) หรือ NO (Objective-C)

ปิดใช้ท่าทางสัมผัสเริ่มต้นของแผนที่

คุณปิดใช้ท่าทางสัมผัสเริ่มต้นบนแผนที่ได้โดยตั้งค่าพร็อพเพอร์ตี้ของคลาส GMSUISettings ซึ่งพร้อมใช้งานเป็นพร็อพเพอร์ตี้ของ GMSMapView คุณเปิดและปิดใช้ท่าทางสัมผัสต่อไปนี้แบบเป็นโปรแกรมได้ โปรดทราบว่าการปิดใช้ท่าทางสัมผัสจะไม่จำกัดการเข้าถึงการตั้งค่ากล้องแบบเป็นโปรแกรม

• scrollGestures - ควบคุมว่าจะเปิดหรือปิดใช้ท่าทางการเลื่อน หากเปิดใช้ ผู้ใช้จะปัดเพื่อแพนกล้องได้
• zoomGestures - ควบคุมว่าจะเปิดหรือปิดใช้ท่าทางสัมผัสเพื่อซูม หากเปิดใช้ ผู้ใช้อาจแตะสองครั้ง แตะด้วย 2 นิ้ว หรือบีบนิ้วเพื่อซูมกล้องได้ โปรดทราบว่าการแตะสองครั้งหรือการบีบเมื่อเปิดใช้ scrollGestures อาจเลื่อนกล้องไปยังจุดที่ระบุ
• tiltGestures - ควบคุมว่าจะเปิดหรือปิดใช้ท่าทางสัมผัสการเอียง หากเปิดใช้ ผู้ใช้อาจใช้การปัด 2 นิ้วในแนวตั้งขึ้นหรือลงเพื่อเอียงกล้องได้
• rotateGestures - ควบคุมว่าจะเปิดหรือปิดใช้ท่าทางสัมผัสเพื่อหมุน หากเปิดใช้ ผู้ใช้อาจใช้ท่าทางสัมผัสแบบหมุนด้วย 2 นิ้วเพื่อหมุนกล้องได้

ในตัวอย่างนี้ ท่าทางสัมผัสทั้งการเลื่อนและการซูมปิดอยู่

mapView.settings.scrollGestures = false
mapView.settings.zoomGestures = false

mapView.settings.scrollGestures = NO;
mapView.settings.zoomGestures = NO;

ตำแหน่งการควบคุมและองค์ประกอบ UI

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

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide
• bottomTrailingButtonsLayoutGuide

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

/* Add a label to the top left, positioned below the header. */
let topLabel = UILabel()
topLabel.text = "Top Left"
mapView.addSubview(topLabel)
topLabel.translatesAutoresizingMaskIntoConstraints = false
topLabel.topAnchor.constraint(equalTo: mapView.navigationHeaderLayoutGuide.bottomAnchor).isActive = true
topLabel.leadingAnchor.constraint(equalTo: mapView.leadingAnchor).isActive = true

/* Add a label to the bottom right, positioned above the footer. */
let bottomLabel = UILabel()
bottomLabel.text = "Bottom Right"
mapView.addSubview(bottomLabel)
bottomLabel.translatesAutoresizingMaskIntoConstraints = false
bottomLabel.bottomAnchor.constraint(equalTo: mapView.navigationFooterLayoutGuide.topAnchor).isActive = true
bottomLabel.trailingAnchor.constraint(equalTo: mapView.trailingAnchor).isActive = true

/* Add a label to the top left, positioned below the header. */
UILabel *topLabel = [[UILabel alloc] init];
topLabel.text = @"Top Left";
[view addSubview:topLabel];
topLabel.translatesAutoresizingMaskIntoConstraints = NO;
[topLabel.topAnchor
    constraintEqualToAnchor:mapView.navigationHeaderLayoutGuide.bottomAnchor].active = YES;
[topLabel.leadingAnchor constraintEqualToAnchor:mapView.leadingAnchor].active = YES;

/* Add a label to the bottom right, positioned above the footer. */
UILabel *bottomLabel = [[UILabel alloc] init];
bottomLabel.text = @"Bottom Right";
[view addSubview:bottomLabel];
bottomLabel.translatesAutoresizingMaskIntoConstraints = NO;
[bottomLabel.bottomAnchor
    constraintEqualToAnchor:mapView.navigationFooterLayoutGuide.topAnchor].active = YES;
[bottomLabel.trailingAnchor constraintEqualToAnchor:mapView.trailingAnchor].active = YES;

ดูตัวอย่างวิธีใช้ bottomTrailingButtonsLayoutGuide เพื่อจัดตำแหน่งปุ่มรายงานการหยุดชะงักแบบเรียลไทม์ได้ที่หัวข้อกำหนดค่าการหยุดชะงักแบบเรียลไทม์

ซ่อนเส้นทางอื่น

เมื่ออินเทอร์เฟซผู้ใช้มีข้อมูลมากเกินไป คุณสามารถลดความยุ่งเหยิงได้โดยแสดงเส้นทางอื่นน้อยกว่าค่าเริ่มต้น (2 เส้นทาง) หรือไม่แสดงเส้นทางอื่นเลย คุณสามารถกำหนดค่าตัวเลือกนี้ก่อนที่จะดึงข้อมูลเส้นทางได้โดยกำหนดค่า GMSNavigationRoutingOptions และตั้งค่า alternateRoutesStrategy ด้วยค่าการแจงนับค่าใดค่าหนึ่งต่อไปนี้

ตัวอย่าง

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีซ่อนเส้นทางอื่นทั้งหมด

let routingOptions = GMSNavigationRoutingOptions(alternateRoutesStrategy: .none)
navigator?.setDestinations(destinations,
                           routingOptions: routingOptions) { routeStatus in
  ...
}

GMSNavigationRoutingOptions *routingOptions = [[GMSNavigationRoutingOptions alloc] initWithAlternateRoutesStrategy:GMSNavigationAlternateRoutesStrategyNone];
[navigator setDestinations:destinations
            routingOptions:routingOptions
                  callback:^(GMSRouteStatus routeStatus){...}];