Place Search 元件

Places UI Kit 的 Place Search 元件會以清單形式顯示地點搜尋結果。

您可以自訂地點搜尋清單。您可以指定：

要顯示的內容
直向模式的媒體大小
文字截斷
方向
符合品牌和應用程式設計語言的主題覆寫
註明內容來源的位置
地點是否可選取

您也可以自訂要求，執行 SearchByTextRequest 或 SearchNearbyRequest。

帳單

每當 SearchByTextRequest() 或 PlaceSearchViewRequest() 繫結值變更時，系統就會向您收費。

在應用程式中加入地點搜尋功能

使用 PlaceSearchView class 新增 Place Search 小工具。

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

自訂 Place Search 元件

自訂內容

您必須指定元件要顯示的內容。

這個範例會設定元件，顯示地點的地址和評分。

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 Kit 預設提供深色主題，因此您可能需要自訂深色和淺色主題。如要自訂深色主題，請在自訂主題中新增 .dark 和 attribution.darkModeColor 的值。

範例

新增 Place Search 元件

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 Kit 預設提供深色主題，因此您可能需要自訂深色和淺色主題。如要自訂深色主題，請在自訂主題中新增 .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()
    }
}