플랫폼 선택: Android iOS JavaScript

장소 검색 구성요소

Places UI Kit의 장소 검색 구성요소는 장소 검색 결과를 목록에 렌더링합니다.

장소 UI 키트 장소 검색 구성요소

장소 검색 목록을 맞춤설정할 수 있습니다. 다음 항목을 지정할 수 있습니다.

  • 표시할 콘텐츠
  • 세로 방향의 미디어 크기
  • 텍스트 자르기
  • 방향
  • 브랜드 및 앱의 디자인 언어와 일치하는 테마 재정의
  • 저작자 표시의 위치
  • 장소를 선택할 수 있는지 여부

SearchByTextRequest 또는 SearchNearbyRequest을 실행하도록 요청을 맞춤설정할 수도 있습니다.

결제

SearchByTextRequest() 또는 PlaceSearchViewRequest() 바인딩 값이 변경될 때마다 요금이 청구됩니다.

앱에 장소 검색 추가

PlaceSearchView class를 사용하여 장소 검색 위젯을 추가합니다.

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

앱이 텍스트 검색 또는 주변 검색 결과를 로드하도록 하려면 PlaceSearchViewRequest 값을 업데이트하세요.

Swift

// use placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request

  @State private var let placeSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )

구성요소가 로드되거나, 장소가 선택되거나, 구성요소 로드에 오류가 있을 때 콜백을 수신할 수도 있습니다(선택사항).

Swift

.onLoad { places in
  print("places: \(places)")
}
.onRequestError { error in
  print("error: \(error)")
}
.onPlaceSelected { place in
  print("place: \(place)")
}

장소 검색 구성요소 맞춤설정

콘텐츠 맞춤설정

구성요소가 표시할 콘텐츠를 지정해야 합니다.

이 예에서는 장소의 주소와 평점을 표시하도록 구성요소를 구성합니다.

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating()]
)

선택적으로 장소 검색 구성요소에 표시되는 콘텐츠의 다음 측면을 맞춤설정할 수도 있습니다.

  • content: 구성요소에 표시되는 콘텐츠입니다.
  • mediaSize: 프래그먼트의 세로 방향 사진 크기입니다. 기본값은 small입니다. 콘텐츠에 지정됨
  • preferTruncation: 각 장소 세부정보 뷰의 텍스트를 자를지 여부입니다. 기본값은 false입니다.
  • theme: PlacesMaterialTheme에서 상속되는 맞춤 테마입니다. 테마에 대해 자세히 알아보세요.
  • attributionPosition: 구성요소의 상단 또는 하단에 Google 지도 저작자 표시를 표시할지 여부입니다. 기본값은 .top입니다.
  • selectable: 목록의 각 장소를 선택할 수 있는지 여부입니다. 선택 가능한 경우 장소를 선택한 후 onPlaceSelected 클로저가 호출됩니다. 기본값은 false입니다.

PlaceSearchConfiguration에 맞춤설정 구성을 추가합니다.

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address, .rating, .media(size: .large)],
    preferTruncation: true, // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom, // default is top
    selectable: true // default is false
)

방향 맞춤설정

기본 방향은 세로입니다. PlaceSearchView에서 가로 방향을 지정할 수 있습니다.

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

테마 맞춤설정

기본 스타일 속성을 재정의하는 테마를 지정할 수 있습니다. 기본값은 PlacesMaterialTheme입니다.

테마에 관한 자세한 내용은 맞춤 스타일 지정 섹션을 참고하세요.

Places UI 키트는 기본적으로 어두운 테마를 제공하므로 어두운 테마와 밝은 테마를 모두 맞춤설정해야 할 수 있습니다. 어두운 테마를 맞춤설정하려면 맞춤 테마에 .dark 및 attribution.darkModeColor 값을 추가합니다.

예

장소 검색 구성요소 추가

Swift

struct PlaceSearchDemoView: View {
  private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating(), .type(), .media(size: .large)],
    preferTruncation: true,  // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom,  // default is top
    selectable: true  // default is false
  )
  // can also do let placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request
  @State private var placeSearchViewRequest: PlaceSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )
  var body: some View {
    PlaceSearchView(
      orientation: .horizontal,  // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
    )
    .onLoad { places in
      print("places: \(places)")
    }
    .onRequestError { error in
      print("error: \(error)")
    }
    .onPlaceSelected { place in
      print("place: \(place)")
    }
  }
}

테마 맞춤설정

Places UI 키트는 기본적으로 어두운 테마를 제공하므로 어두운 테마와 밝은 테마를 모두 맞춤설정해야 할 수 있습니다. 어두운 테마를 맞춤설정하려면 맞춤 테마에 .dark 및 attribution.darkModeColor 값을 추가하세요.

Swift

@Environment(\.colorScheme) var colorScheme
var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      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.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
}