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

คอมโพเนนต์ Place Autocomplete พื้นฐาน

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

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

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

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

คุณสามารถใช้คอมโพเนนต์ Place Autocomplete พื้นฐานแบบแยกกันหรือร่วมกับ API และบริการอื่นๆ ของแพลตฟอร์ม Google Maps ก็ได้

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

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

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

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

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

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

Swift

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

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

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

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

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

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

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

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

ปรับแต่งธีม

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

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

UI Kit ของ Places มีธีมมืดเป็นค่าเริ่มต้น คุณจึงอาจต้องปรับแต่งทั้งธีมมืดและธีมสว่าง หากต้องการปรับแต่งธีมมืด ให้เพิ่มค่าสำหรับ .dark และ attribution.darkModeColor ลงในธีมที่กำหนดเอง

ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดธีมได้ที่ส่วนการจัดรูปแบบที่กำหนดเอง

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

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

Swift

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

ตัวอย่าง

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

สำคัญ: ตั้งค่าเริ่มต้นของ showWidget เป็น false เพื่อให้คอมโพเนนต์ที่กำหนดเองปรากฏขึ้นเมื่อผู้ใช้คลิกปุ่ม

ตัวอย่างนี้สร้างคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานที่กำหนดเองพร้อมปุ่ม ระบบได้ตั้งค่าไอคอนเริ่มต้น ความหนาแน่นของรายการแบบ 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()
    }
}