เลือกแพลตฟอร์ม: Android iOS JavaScript

คอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานสำหรับสถานที่

คอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานสำหรับสถานที่ของ Places UI Kit ช่วยให้คุณเพิ่มคอมโพเนนต์ UI แต่ละรายการที่แสดงผลรหัสสถานที่เมื่อผู้ใช้เลือกสถานที่ คอมโพเนนต์นี้เป็นหน้าจอแบบเต็มที่แสดงแถบค้นหาเพื่อให้ผู้ใช้ป้อนคำค้นหา เมื่อผู้ใช้พิมพ์ ระบบจะแสดงรายการผลการค้นหาที่เติมข้อความอัตโนมัติใต้แถบค้นหา เมื่อผู้ใช้แตะสถานที่ ระบบจะแสดงผลออบเจ็กต์สถานที่ที่มีเฉพาะรหัสสถานที่ให้นักพัฒนาแอป คอมโพเนนต์นี้ปรับแต่งได้

คอมโพเนนต์จะใช้ขอบเขตทางภูมิศาสตร์และพารามิเตอร์การค้นหาอื่นๆ ผ่านโครงสร้าง AutocompleteFilter

การตอบกลับจะแสดงโครงสร้าง Place ที่มีเฉพาะช่อง placeID ที่ป้อนข้อมูล

คอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานสำหรับสถานที่มาพร้อมตัวเลือกการปรับแต่งต่อไปนี้ ความหนาแน่นของรายการ และจะรวมไอคอนตำแหน่งหรือไม่ ใช้โครงสร้าง AutocompleteUICustomization เพื่อปรับแต่งคอมโพเนนต์

คุณสามารถใช้คอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานสำหรับสถานที่แบบแยกกันหรือร่วมกับ Google Maps Platform API และบริการอื่นๆ

การเรียกเก็บเงิน

ระบบจะเรียกเก็บเงินจากคุณทุกครั้งที่เปิดคอมโพเนนต์และมีการส่งคำค้นหา ระบบจะไม่เรียกเก็บเงินจากคุณอีกสำหรับเซสชันนั้น เว้นแต่เซสชันจะหมดอายุหรือมีการเลือกสถานที่จากรายการ

เพิ่มคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานลงในแอป

ตั้งค่าพารามิเตอร์ตัวกรองการเติมข้อความอัตโนมัติ (เช่น ประเภทที่จะแสดงผล ประเทศที่จะจำกัดผลการค้นหา พิกัดภูมิภาคสำหรับผลการค้นหา และข้อมูลระยะทางหากมีการตั้งค่าต้นทางของผู้ใช้) เช่นเดียวกับที่คุณจะใช้การเติมข้อความอัตโนมัติสำหรับสถานที่ (ใหม่) โดยไม่มี Places UI Kit ดูคำแนะนำแบบเต็มและตัวอย่างโค้ดเพื่อสร้างตัวกรองการเติมข้อความอัตโนมัติได้ในเอกสารประกอบการเติมข้อความอัตโนมัติสำหรับสถานที่ (ใหม่)

เมื่อสร้างตัวกรองการเติมข้อความอัตโนมัติแล้ว คุณจะสร้างโครงสร้างด้วยการปรับแต่ง UI ได้ ดูตัวเลือกและคำแนะนำในการปรับแต่ง

จากนั้นสร้างปุ่มที่จะเปิดคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานที่ปรับแต่งแล้ว

Swift

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

ดูตัวอย่างแบบเต็ม

ปรับแต่งคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐาน

ปรับแต่งเนื้อหา

ความหนาแน่นของรายการ

คุณเลือกแสดงรายการ 2 บรรทัดหรือรายการหลายบรรทัดก็ได้ ใช้ตัวเลือกใน AutocompleteListDensity (.twoLine หรือ .multiLine) ในคลาส AutocompleteUICustomization หากไม่ได้ระบุความหนาแน่นของรายการ คอมโพเนนต์จะแสดงรายการ 2 บรรทัด

ไอคอนตำแหน่ง

คุณเลือกได้ว่าจะแสดงไอคอนสถานที่เริ่มต้นในรายการผลการค้นหาหรือไม่ ใช้ตัวเลือกใน AutocompleteUIIcon (.defaultIcon หรือ .noIcon) ในคลาส AutocompleteUICustomization

ปรับแต่งธีม

คุณระบุธีมที่จะลบล้างแอตทริบิวต์สไตล์เริ่มต้นได้ คุณสามารถปรับแต่งสี การจัดรูปแบบข้อความ ระยะห่าง ขอบ และมุมของคอมโพเนนต์รายละเอียดสถานที่ ค่าเริ่มต้นคือ PlacesMaterialTheme

แอตทริบิวต์ธีมที่ไม่ได้ลบล้างจะใช้สไตล์เริ่มต้น

Places UI Kit มีธีมมืดให้โดยค่าเริ่มต้น คุณจึงอาจต้องปรับแต่งทั้งธีมมืดและธีมสว่าง หากต้องการปรับแต่งธีมมืด ให้เพิ่มค่าสำหรับ .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()
    }
}