“地点搜索”组件

Places 界面套件的“地点搜索”组件会在列表中呈现地点搜索结果。

您可以自定义地点搜索列表。您可以指定：

要显示的内容
垂直方向的媒体尺寸
文本截断
方向
与您的品牌和应用的设计语言相符的主题替换项
注明内容来源的位置
相应地点是否可供选择

您还可以自定义请求，以执行 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)")
}

自定义地点搜索组件

自定义内容

您必须指定组件将显示哪些内容。

此示例将组件配置为显示 Place 的地址和评分。

Swift

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

您还可以选择自定义地点搜索组件中显示的内容的以下方面：

content：组件中显示的内容。
mediaSize：fragment 处于竖屏方向时的照片大小。默认值为“小”。在内容中指定。
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 界面套件默认提供深色主题，因此您可能需要同时自定义深色主题和浅色主题。如需自定义深色主题，请向您的自定义主题添加 .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 界面套件默认提供深色主题，因此您可能需要同时自定义深色主题和浅色主题。如需自定义深色主题，请为自定义主题添加 .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()
    }
}