플랫폼 선택: Android iOS JavaScript

기본 Place Autocomplete 구성요소

Places UI Kit의 기본 Place Autocomplete 구성요소를 사용하면 사용자가 장소를 선택할 때 장소 ID를 반환하는 개별 UI 구성요소를 추가할 수 있습니다. 이 구성요소는 사용자가 검색어를 입력할 수 있는 검색창을 제공하는 전체 화면 커버입니다. 사용자가 입력하면 검색창 아래에 자동 완성 결과 목록이 표시됩니다. 사용자가 장소를 탭하면 장소 ID만 있는 장소 객체가 개발자에게 반환됩니다. 이 구성요소는 맞춤설정할 수 있습니다.

이 구성요소는 AutocompleteFilter 구조체를 통해 지리적 경계와 기타 검색 매개변수를 사용합니다.

대답은 placeID 필드만 채워진 Place 구조체를 제공합니다.

기본 장소 자동 완성 구성요소에는 목록 밀도와 위치 아이콘 포함 여부라는 맞춤설정 옵션이 있습니다. AutocompleteUICustomization 구조체를 사용하여 구성요소를 맞춤설정합니다.

기본 장소 자동 완성 구성요소는 독립적으로 사용하거나 다른 Google Maps Platform API 및 서비스와 함께 사용할 수 있습니다.

결제

구성요소가 열리고 쿼리가 실행될 때마다 요금이 청구됩니다. 세션이 만료되거나 목록에서 장소를 선택하지 않는 한 해당 세션에 대해 다시 청구되지 않습니다.

앱에 기본 자동 완성 구성요소 추가

Places UI Kit 없이 Place Autocomplete (New)을 사용하는 것처럼 자동 완성 필터 매개변수 (예: 반환할 유형, 결과를 제한할 국가, 결과의 지역 좌표, 사용자 출발지가 설정된 경우 거리 정보)를 설정합니다. 전체 안내와 자동 완성 필터를 만드는 코드 예시는 Place Autocomplete (신규) 문서를 참고하세요.

자동 완성 필터를 만든 후 UI 맞춤설정으로 구조체를 만들 수 있습니다. 맞춤설정 옵션 및 안내 보기

그런 다음 맞춤설정된 기본 자동 완성 구성요소를 실행하는 버튼을 만듭니다.

Swift

  Button("Search for a place") {
    showWidget.toggle()
  }
  .basicPlaceAutocomplete(
    show: $showWidget
     // ...
  )

전체 예시 보기

기본 자동 완성 구성요소 맞춤설정

콘텐츠 맞춤설정

목록 밀도

2줄 목록 또는 여러 줄 목록을 표시할 수 있습니다. AutocompleteUICustomization 클래스에서 AutocompleteListDensity (.twoLine 또는 .multiLine)의 옵션을 사용합니다. 목록 밀도를 지정하지 않으면 구성요소에 2줄 목록이 표시됩니다.

위치 아이콘

결과 목록에 기본 장소 아이콘을 표시할지 선택할 수 있습니다. AutocompleteUICustomization 클래스에서 AutocompleteUIIcon (.defaultIcon 또는 .noIcon)의 옵션을 사용합니다.

테마 맞춤설정

기본 스타일 속성을 재정의하는 테마를 지정할 수 있습니다. 장소 세부정보 구성요소의 색상, 서체, 간격, 테두리, 모서리를 맞춤설정할 수 있습니다. 기본값은 PlacesMaterialTheme입니다.

재정의되지 않은 테마 속성은 기본 스타일을 사용합니다.

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

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

기본 자동 완성 구성요소에 콘텐츠 및 테마 맞춤설정 추가

AutocompleteUICustomization 클래스를 사용하여 기본 자동 완성 구성요소를 맞춤설정합니다.

Swift

let uiCustomization = AutocompleteUICustomization(
    listDensity: .multiLine,
    listItemIcon: .noIcon,
    theme: PlacesMaterialTheme()
)

예

기본 자동 완성 구성요소 추가

이 예시에서는 버튼이 있는 맞춤 기본 자동 완성 구성요소를 만듭니다. 기본 아이콘, 2줄 목록 밀도, 맞춤 테마가 설정되었습니다. 자동 완성 필터는 라스베이거스 및 그 주변에서 회계 관련 장소를 찾도록 설정되어 있습니다.

Swift

  // Note: You must provide an API key in your app entry point first.
  // A demo view of the basic place autocomplete widget.
  public struct BasicPlaceAutocompleteView: View {
    @State private var fetchedPlace: Place?
    @State private var placesError: PlacesError?
    @State private var showWidget = false
    public var body: some View {
      let types: Set<PlaceType> = [.accounting]
      let countries: Set<String> = ["US"]
      let origin = CLLocation(latitude: 36.19030535579595, longitude: -115.25397680618019)
      let coordinateRegion = RectangularCoordinateRegion(
        northEast: CLLocationCoordinate2D(
          latitude: 36.25290087640495, longitude: -115.08025549571225),
        southWest: CLLocationCoordinate2D(latitude: 36.06607422287787, longitude: -115.33431432920293)
      )
      let regionCode = "US"
      let inputOffset = 10
      let filter = AutocompleteFilter(
        types: types,
        countries: countries,
        origin: origin,
        coordinateRegionBias: coordinateRegion,
        regionCode: regionCode)
      let uiCustomization = AutocompleteUICustomization(
        listDensity: .multiLine,
        listItemIcon: .noIcon,
        theme: PlacesMaterialTheme()
      )
      VStack {
        Button("Search for a place") {
          showWidget.toggle()
        }
        .basicPlaceAutocomplete(
          filter: filter,
          uiCustomization: uiCustomization ?? AutocompleteUICustomization(),
          show: $showWidget,
          onSelection: { place in
            guard let placeID = place.placeID else {
              self.placesError = .internal(
                "Could not fetch place details because place ID from selected suggestion not found."
              )
              return
            }
            Task {
              let placesClient = await PlacesClient.shared
              let fetchPlaceRequest = FetchPlaceRequest(
                placeID: placeID,
                placeProperties: [.displayName, .formattedAddress]
              )
              switch await placesClient.fetchPlace(with: fetchPlaceRequest) {
              case .success(let place):
                print("Fetched place: \(place)")
                self.fetchedPlace = place
              case .failure(let placesError):
                print("Failed to fetch place: \(placesError)")
                self.placesError = placesError
              }
            }
          },
          onError: { placesError in
            self.placesError = placesError
          }
        )
        if let placesError = $placesError.wrappedValue {
          Text(placesError.localizedDescription)
            .frame(maxWidth: .infinity, alignment: .leading)
        } else if let fetchedPlace = $fetchedPlace.wrappedValue {
          Text("\(fetchedPlace)")
            .frame(maxWidth: .infinity, alignment: .leading)
        }
      }
    }
  }

테마 맞춤설정

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