Chọn nền tảng: Android iOS JavaScript

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.

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

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 đã 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 bạn. 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.

bố cục ngang và dọc
Bố cục ngang và dọc

Thành phần 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.

Tuỳ chọn nội dung trong phần thông tin chi tiết về địa điểm
Các lựa chọn hiển thị nội dung

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.

Chế độ xem thu gọn Chế độ xem toàn bộ
  • Ảnh về địa điểm
  • Địa chỉ của địa điểm
  • Điểm xếp hạng và số lượt xếp hạng
  • Loại địa điểm
  • Giá
  • Thông tin về lối vào có hỗ trợ xe lăn
  • Trạng thái đang mở cửa
  • Ảnh ghép về địa điểm
  • Địa chỉ của địa điểm
  • Điểm xếp hạng và số lượt xếp hạng
  • Loại địa điểm
  • Giá
  • Thông tin về khả năng hỗ trợ tiếp cận
  • Trạng thái đang mở cửa
  • Giờ mở cửa
  • Tóm tắt nội dung biên tập
  • Trang web
  • Số điện thoại
  • Bài đánh giá được hiển thị trong thẻ riêng
  • Plus code
  • Danh sách tính năng, được hiển thị trong một thẻ chuyên dụng
  • Thông tin nổi bật theo loại, chẳng hạn như giá xăng cho trạm xăng

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 trực quan

Tạo kiểu tuỳ chỉnh

Bạn có thể tuỳ chỉnh màu sắc, kiểu chữ, khoảng cách, đường viền và góc của thành phần Thông tin chi tiết về địa điểm.

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.

Places UI Kit cung cấp giao diện tối theo mặc định, vì vậy, bạn có thể cần tuỳ chỉnh cả giao diện tối và giao diện sáng. Để tuỳ chỉnh giao diện tối, hãy thêm các giá trị cho .dark và attribution.darkModeColor vào giao diện tuỳ chỉnh.

Hãy xem phần Định kiểu tuỳ chỉnh để biết thêm thông tin về việc định kiểu.

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.

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

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

Swift

  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

Swift

  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

Swift

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

Places UI Kit cung cấp giao diện tối theo mặc định, vì vậy, bạn có thể cần tuỳ chỉnh cả giao diện tối và giao diện sáng. Để tuỳ chỉnh giao diện tối, hãy thêm các giá trị cho .dark và attribution.darkModeColor vào giao diện tuỳ chỉnh của bạn.

Swift

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

Swift

  @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)
  }