Thành phần Thông tin chi tiết về địa điểm

Thành phần Chi tiết về địa điểm trong Places UI Kit cho phép bạn thêm một thành phần giao diện người dùng riêng lẻ để hiển thị thông tin chi tiết về địa điểm trong ứng dụng. Bạn có thể tuỳ chỉnh thành phần này.

Bạn có thể sử dụng thành phần Thông tin chi tiết về địa điểm một cách độc lập hoặc kết hợp với các API và dịch vụ khác của Google Maps Platform. Thành phần này lấy Place ID, tên tài nguyên hoặc toạ độ vĩ độ/kinh độ và trả về thông tin Chi tiết về địa điểm được hiển thị.

Thành phần Chi tiết về địa điểm có thể được tạo giao diện hoàn toàn, cho phép bạn tuỳ chỉnh phông chữ, màu sắc và bán kính góc cho phù hợp với trường hợp sử dụng và nguyên tắc về thương hiệu trực quan của mình. Bạn có thể tuỳ chỉnh giao diện của thông tin chi tiết về địa điểm bằng cách cung cấp các giá trị PlacesMaterialTheme tuỳ chỉnh. Bạn cũng có thể tuỳ chỉnh những trường thông tin chi tiết về địa điểm được đưa vào bằng cách chỉ định một danh sách các mục PlaceDetailsCompactView, mỗi mục tương ứng với một phần thông tin được hiển thị về địa điểm.

Biến thể bố cục

Thành phần Chi tiết về địa điểm hỗ trợ 2 biến thể bố cục chính:

• Thu gọn: Bố cục để xem trước thông tin chính.
• Đầy đủ: Bố cục toàn diện hiển thị tất cả thông tin chi tiết có sẵn về địa điểm.

Bạn có thể hiển thị bố cục thu gọn theo hướng dọc hoặc hướng ngang. Điều này cho phép bạn tích hợp thành phần này vào nhiều bố cục thiết kế và kích thước màn hình. Bạn chỉ có thể hiển thị bố cục đầy đủ theo chiều dọc.

Thành phần Thông tin chi tiết về địa điểm cho phép bạn kiểm soát chi tiết nội dung hiển thị trong thành phần này. Bạn có thể hiện hoặc ẩn từng phần tử (chẳng hạn như ảnh, bài đánh giá và thông tin liên hệ), cho phép tuỳ chỉnh chính xác giao diện và mật độ thông tin của các thành phần.

Chế độ xem thu gọn của phần Thông tin chi tiết về địa điểm

Chế độ xem nhỏ gọn của Place Details (PlaceDetailsCompactView) hiển thị thông tin chi tiết về một địa điểm đã chọn bằng cách sử dụng không gian tối thiểu. Điều này có thể hữu ích trong một cửa sổ thông tin làm nổi bật một địa điểm trên bản đồ, trong một trải nghiệm mạng xã hội như chia sẻ vị trí trong cuộc trò chuyện, dưới dạng đề xuất để chọn vị trí hiện tại của bạn hoặc trong một bài viết về nội dung nghe nhìn để tham chiếu địa điểm trên Google Maps.

Chế độ xem đầy đủ về thông tin chi tiết về địa điểm

Chế độ xem đầy đủ thông tin chi tiết về địa điểm (PlaceDetailsView) cung cấp một không gian lớn hơn để hiển thị thông tin chi tiết về địa điểm và cho phép bạn hiển thị nhiều loại thông tin hơn.

Các lựa chọn hiển thị nội dung

Bạn có thể chỉ định nội dung cần hiển thị bằng cách sử dụng các enum trong PlaceDetailsCompactContent hoặc PlaceDetailsContent.

Thanh toán

Khi sử dụng Place Details UI Kit, bạn sẽ bị tính phí cho mỗi lần phương thức PlaceDetailsQuery được gọi. Nếu tải cùng một địa điểm nhiều lần, bạn sẽ bị tính phí cho mỗi yêu cầu.

Thêm thông tin chi tiết về địa điểm vào ứng dụng

Thành phần Thông tin chi tiết về địa điểm là một Khung hiển thị giao diện người dùng Swift. Bạn có thể tuỳ chỉnh giao diện của thông tin chi tiết về địa điểm cho phù hợp với nhu cầu và giao diện của ứng dụng. Tìm hiểu thêm về tính năng tuỳ chỉnh.

Bạn có thể chọn tải thành phần Chi tiết về địa điểm bằng một mã địa điểm, tên tài nguyên hoặc toạ độ vĩ độ/kinh độ. Bạn có thể chọn một hoặc nhiều phương thức. Đặt identifier trong cấu trúc PlaceDetailsQuery thành .placeID, .resourceName hoặc .coordinate.

Vị trí mặc định cho chế độ xem thu gọn là dọc. Nếu bạn muốn có bố cục ngang, hãy chỉ định orientation: .horizontal trong PlaceDetailsCompactView. Bạn cũng có thể tuỳ ý chỉ định orientation: .vertical để cho rõ ràng. Chế độ xem toàn bộ chỉ có thể hiển thị theo chiều dọc.

Hãy xem ví dụ trong phần Ví dụ về thành phần Thông tin chi tiết về địa điểm.

Tuỳ chỉnh giao diện

Bộ công cụ giao diện người dùng Places cung cấp một phương pháp tiếp cận hệ thống thiết kế để tuỳ chỉnh hình ảnh dựa trên Material Design (với một số điểm sửa đổi dành riêng cho Google Maps). Hãy xem thông tin tham khảo của Material Design về Màu sắc và Kiểu chữ. Theo mặc định, kiểu này tuân thủ ngôn ngữ thiết kế trực quan của Google Maps.

Giao diện của thành phần được tuỳ chỉnh bằng các cấu trúc placesMaterialColor, placesMaterialFont, placesMaterialShape và placesMaterialTheme.

Bạn có thể tuỳ chỉnh các kiểu sau:

Hãy xem ví dụ trong phần Ví dụ về thành phần Thông tin chi tiết về địa điểm.

Tuỳ chỉnh chiều rộng và chiều cao

Chế độ xem thu gọn

Chiều rộng đề xuất:

• Hướng dọc: Từ 180 pixel đến 300 pixel.
• Hướng ngang: Từ 180 pixel đến 500 pixel.

Phương pháp hay nhất là không đặt chiều cao cho chế độ xem thu gọn. Thao tác này sẽ cho phép nội dung trong cửa sổ đặt chiều cao, cho phép hiển thị tất cả thông tin.

Những chiều rộng nhỏ hơn 160 pixel có thể không hiển thị đúng cách.

Lượt xem toàn bộ

Đối với chế độ xem toàn màn hình, chiều rộng nên nằm trong khoảng từ 250 pixel đến 450 pixel. Chiều rộng nhỏ hơn 250 pixel có thể không hiển thị đúng cách.

Bạn có thể đặt chiều cao của thành phần: Chế độ xem Chi tiết về địa điểm theo chiều dọc sẽ cuộn theo chiều dọc trong không gian được phân bổ.

Phương pháp hay nhất là đặt chiều cao cho chế độ xem toàn màn hình. Việc này sẽ giúp nội dung trong cửa sổ cuộn đúng cách.

Màu sắc phân bổ

Điều khoản dịch vụ của Google Maps yêu cầu bạn sử dụng một trong ba màu thương hiệu cho thông tin ghi nhận quyền sở hữu của Google Maps. Thông tin ghi nhận quyền tác giả này phải xuất hiện và có thể truy cập được khi bạn đã thực hiện các thay đổi về chế độ tuỳ chỉnh.

Chúng tôi cung cấp 3 màu thương hiệu để bạn lựa chọn và có thể đặt riêng cho giao diện sáng và tối:

• Giao diện sáng: attributionColorLight với các enum cho màu trắng, xám và đen.
• Giao diện tối: attributionColorDark với các giá trị enum cho màu trắng, xám và đen.

Ví dụ về thành phần Place Details

Tạo một khung hiển thị đầy đủ có bố cục dọc

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Tạo một khung hiển thị thu gọn có bố cục ngang

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Tạo chế độ xem đầy đủ có bố cục dọc

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  var theme: PlacesMaterialTheme = PlacesMaterialTheme()
  var selectedType: Set<PlaceDetailsContent> = PlaceDetailsCompactView.standardContent
  
  var configuration: PlaceDetailsConfiguration {
    PlaceDetailsConfiguration(
      content: selectedType,
      theme: theme)
  }
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    placeIDPickerFocused = true
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  GooglePlacesSwift.PlaceDetailsView(
    query: $query,
    configuration: configuration,
    placeDetailsCallback: placeDetailsCallback
  )

Tuỳ chỉnh các thuộc tính kiểu

Mẫu này cho thấy cách tuỳ chỉnh các thuộc tính kiểu mặc định của một khung hiển thị đầy đủ hoặc thu gọn.

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  color.outlineDecorative = (colorScheme == .dark ? .white : .black)
  color.onSurface = (colorScheme == .dark ? .yellow : .red)
  color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
  color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
  color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
  color.positive = (colorScheme == .dark ? .yellow : .red)
  color.primary = (colorScheme == .dark ? .yellow : .purple)
  color.info = (colorScheme == .dark ? .yellow : .purple)
  var shape = PlacesMaterialShape()
  shape.cornerRadius = 10
  var font = PlacesMaterialFont()
  font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
  font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
  font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
  var attribution = PlacesMaterialAttribution()
  attribution.lightModeColor = .black
  attribution.darkModeColor = .white
  theme.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

Hiện nội dung cụ thể

Mẫu này tạo một khung hiển thị nhỏ gọn chỉ hiển thị nội dung nghe nhìn, địa chỉ, điểm xếp hạng và loại, bằng cách sử dụng giao diện được tạo trong ví dụ trước.

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }