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

Tạo kiểu tuỳ chỉnh

Tuỳ chỉnh hình ảnh cho thông tin chi tiết về địa điểm
Ví dụ về cách tuỳ chỉnh hình ả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 các thành phần trong bộ công cụ Places UI sau đây:

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ắcKiể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.

Các lựa chọn tuỳ chỉnh thông tin chi tiết về địa điểm

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

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

Thuộc tính giao diện Cách sử dụng
Màu
theme.color.surface Nền vùng chứa và hộp thoại
theme.color.outlineDecorative Đường viền vùng chứa
theme.color.primary Đường liên kết, chỉ báo tải, biểu tượng tổng quan
theme.color.onSurface Tiêu đề, nội dung hộp thoại
theme.color.onSurfaceVariant Thông tin về địa điểm
theme.color.secondaryContainer Nền của nút
theme.color.onSecondaryContainer Văn bản và biểu tượng của nút
theme.color.neutralContainer Xem huy hiệu ngày, các hình dạng giữ chỗ khi tải
theme.color.onNeutralContainer Ngày đánh giá, lỗi tải
theme.color.positiveContainer Huy hiệu bộ sạc xe điện
theme.color.onPositiveContainer Nội dung huy hiệu bộ sạc xe điện hiện có
theme.color.positive Gắn nhãn "Mở cửa" cho địa điểm
theme.color.negative Nhãn "Đã đóng" hiện tại của địa điểm
theme.color.info Biểu tượng lối vào có hỗ trợ xe lăn
theme.measurement.borderWidthButton Nút Mở trong Maps và OK
   
Kiểu chữ
theme.font.bodySmall Thông tin về địa điểm
theme.font.bodyMedium Thông tin về địa điểm, nội dung hộp thoại
theme.font.labelMedium Nội dung huy hiệu
theme.font.labelLarge Nội dung nút
theme.font.headlineMedium Tiêu đề hộp thoại
theme.font.displaySmall Tên địa điểm
theme.font.titleSmall Tên địa điểm
   
Khoảng cách
theme.measurement.spacingExtraSmall
theme.measurement.spacingSmall
theme.measurement.spacingMedium
theme.measurement.spacinglarge
theme.measurement.spacingExtraLarge
theme.measurement.spacingTwoExtraLarge
   
Đo lường
borderWidth Vùng chứa
theme.measurement.borderWidthButton
   
Hình dạng
theme.shape.cornerRadius Vùng chứa
theme.shape.cornerRadiusButton Nút Mở trong Maps và nút OK (không bao gồm nút biểu tượng tròn)
theme.shape.cornerRadiusThumbnail Đặt hình thu nhỏ
theme.shape.cornerRadiusCollageOuter Ảnh ghép từ nội dung nghe nhìn
theme.shape.cornerRadiusCard Thẻ địa điểm, Thẻ bài đánh giá của người dùng
theme.shape.cornerRadiusDialog Hộp thoại công bố của Google Maps
   
Thông tin ghi nhận quyền sở hữu thương hiệu của Google Maps
attribution.lightModeColor Nút ghi nhận quyền sở hữu và công bố thông tin của Google Maps ở giao diện sáng (các giá trị enum cho màu trắng, xám và đen)
attribution.darkModeColor Nút ghi nhận quyền sở hữu và công bố của Google Maps ở giao diện tối (các enum cho màu trắng, xám và đen)

Màu sắc phân bổ

thuộc tính
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ụ

Hàm này tạo một giao diện ghi đè các thuộc tính kiểu mặc định. Mọi thuộc tính giao diện không bị ghi đè sẽ sử dụng kiểu mặc định.

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
}

Ví dụ đầy đủ cho từng thành phần