表單字段

在下一個(gè)組件的頂部，導(dǎo)入以下依賴項(xiàng)

從“react”導(dǎo)入React、{ useEffect、useState、useRef }；從“ @react-google-maps/api”導(dǎo)入{ useLoadScript } ；

2. 在組件外部聲明一個(gè)變量libraries。此變量讓 Google 腳本知道您正在訪問 Maps API 下的哪個(gè) API。在組件外部聲明此變量非常重要。

const庫(kù) = [ “地點(diǎn)” ];

3. 使用 useLoadScript 初始化腳本

const { isLoaded，loadError } = useLoadScript({const { isLoaded，loadError } = useLoadScript ( { googleMapsApiKey 

    ： process.env.NEXT_PUBLIC_GOOGLE_API_KEY ，庫(kù)    ，  });

process.env.NEXT_PUBLE_GOOGLE_API_KEY表示您從 Google Cloud Console 獲取的 API 密鑰。出于安全原因，最好將您的 API 密鑰存儲(chǔ)在項(xiàng)目結(jié)構(gòu)根目錄的.env文件中，并使用全局變量process.env訪問它

4. 定義一個(gè) useState 來(lái)保存你的輸入字段，以及一個(gè) useRef 來(lái)引用你想要 Autocomplete API 的輸入

const [輸入，setInput] = useState（{}）;const [input，setInput] = useState（{}）; 

  const inputRef = useRef（null）;

5. 定義一個(gè) useEffect 鉤子，將自動(dòng)完成API 附加到輸入字段，這也允許你向自動(dòng)完成API 添加限制

useEffect（（）=> {useEffect（（）=> {

    如果（！isLoaded || loadError）返回; 



    const options = { 

      componentRestrictions：{ country： “ ng ” }，

      fields：[ “address_components”，“geometry” ] ，

    }; 



    const autocomplete = new google.maps.places.Autocomplete （inputRef.current ，options）;     autocomplete.addListener （“place_changed”，（）=> handlePlaceChanged （ autocomplete））; //返回（）=> autocomplete.removeListener（“place_changed”，handlePlaceChanged）; } ，   [isLoaded，loadError]）;

那里的選項(xiàng)對(duì)象包含對(duì) 自動(dòng)完成API 的可選限制。讓我們來(lái)分解一下

componentRestrictions: { country: “ng”}：限制 API 預(yù)測(cè)的范圍，最多可以接收 4 個(gè)國(guó)家代碼。我們的代碼示例使用代表尼日利亞的 ng，因此，當(dāng)用戶輸入文本時(shí)，API 將僅提供尼日利亞位置的預(yù)測(cè)。

fields: [‘“address_components”, “geometry”]：這限制了用戶選擇預(yù)測(cè)時(shí) API 將返回的數(shù)據(jù)。address_components 返回?cái)?shù)據(jù)，如路線、郵政編碼、plus_code 等，而 geometry 返回?cái)?shù)據(jù)，如經(jīng)度和緯度，可用于其他目的。如果您沒有為字段輸入值，API 將返回所有可能的數(shù)據(jù)，您將被相應(yīng)地收費(fèi)。使用此字段可避免接收您不需要的數(shù)據(jù)。

6. 為輸入定義 onChange 函數(shù)

const handleChange = (event) => {const  handleChange = ( event ) => { 

    const {name, value} = event.target ; setInput 

    ( ( values ) => ({...values, [name]: value })); 

  };

7. 定義 placeChange 函數(shù)來(lái)處理用戶選擇預(yù)測(cè)時(shí)發(fā)生的情況

const handlePlaceChanged = async(address) => {const  handlePlaceChanged = async ( address ) => { 

    if (!isLoaded) return ; 

    const place = address.getPlace () if (!place || !place.geometry ) { setInput ({}); return ; }     formData ( place);   };

該函數(shù)處理兩件事

I. 確保用戶從 API 預(yù)測(cè)中選擇一個(gè)有效的預(yù)測(cè)，如果沒有，則將輸入字段設(shè)置為空

II. 將返回的數(shù)據(jù)傳遞給處理表單填寫的另一個(gè)函數(shù)

8. 定義處理表單填寫的函數(shù)

const formData = (data) => {const  formData = ( data ) => { 

    const addressComponents = data? .address_components ; 



    const componentMap = { 

      subPremise : ""，

      premise : ""，

      street_number : ""，

      route : ""，

      country : ""，

      postal_code : ""，

      administrative_area_level_2 : ""，

      administrative_area_level_1 : ""，

    }; 



    for ( const component of addressComponents) { 

      const componentType = component.types [ 0 ] ; 

      if (componentMap.hasOwnProperty ( componentType)) { 

        componentMap[componentType] = component.long_name ; } 

      } 

    const 



    formattedAddress = 

       ${componentMap.subPremise}  ${componentMap.premise}  ${componentMap.street_number}  ${componentMap.route}  .trim ( ); 
    const latitude = data? .geometry ? .location ? .lat (); 
    const經(jīng)度 = 數(shù)據(jù)？.幾何？.位置？. lng (); 

    setInput（（值）=>（{ 
      ...值，
      街道地址：格式化地址，
      國(guó)家：componentMap.國(guó)家，
      郵政編碼：componentMap.郵政編碼，
      城市：componentMap.行政區(qū)域級(jí)別 2，
      州：componentMap.行政區(qū)域級(jí)別1 ，
      緯度：緯度，
      經(jīng)度：經(jīng)度，
    }））；
  }；

我們之前將 API 設(shè)置為僅返回地址組件和幾何圖形，下面是我們?cè)L問它們的方式。

我們定義一些變量來(lái)保存我們的數(shù)據(jù)，然后我們定義一個(gè) for 循環(huán)來(lái)映射 addressComponents 數(shù)組，然后我們檢查返回的每個(gè)數(shù)據(jù)的類型，如果它符合我們的情況，我們就將它分配給適當(dāng)?shù)淖兞俊?/p>

formattedAddress 變量使用模板文字將變量收集到單個(gè)字符串中

緯度和對(duì)數(shù)經(jīng)度是從 API 響應(yīng)中的幾何字段獲得的，可以通過調(diào)用函數(shù).lat()和.lng()訪問它們，然后返回精確的值。

然后我們可以將這些值設(shè)置到我們的輸入對(duì)象中，以設(shè)置我們的輸入字段的值。

附言：根據(jù)所選擇的預(yù)測(cè)，某些字段（例如前提、子前提等）可能不可用并返回空格，因此使用 .trim() 方法刪除空格。

9. 定義輸入字段

輸入字段

注意包含 ref 的字段，自動(dòng)完成 API 將在該字段上工作，而其余字段將基于預(yù)測(cè)選擇

10. 我們已成功集成 Google自動(dòng)完成API 以進(jìn)行表單填寫。我們的 UI 將如下所示

預(yù)先輸入搜索行為

自動(dòng)填充字段

當(dāng)用戶輸入時(shí)，API 會(huì)給出如上所示的預(yù)測(cè)，當(dāng)用戶選擇一個(gè)預(yù)測(cè)時(shí)，它會(huì)填充 opther 字段，如上圖第二張所示。

自動(dòng)完成預(yù)測(cè)框可以根據(jù)您的風(fēng)格需求進(jìn)行編輯。查看Google 文檔以獲取有關(guān)樣式的更多詳細(xì)信息

自動(dòng)完成的 CSS 類

我們現(xiàn)在已經(jīng)介紹了如何實(shí)現(xiàn) Google位置自動(dòng)完成API 以及一些策略，以確保您在優(yōu)化成本的同時(shí)收到所需的數(shù)據(jù)。

如何找到自動(dòng)完成API

冪簡(jiǎn)集成是國(guó)內(nèi)領(lǐng)先的API集成管理平臺(tái)，專注于為開發(fā)者提供全面、高效、易用的API集成解決方案。冪簡(jiǎn)API平臺(tái)提供了多種維度發(fā)現(xiàn)API的功能：通過關(guān)鍵詞搜索Google自動(dòng)完成 API、從 API Hub 分類瀏覽API 網(wǎng)站運(yùn)營(yíng)-SEO服務(wù)、從開放平臺(tái) 分類瀏覽企業(yè)間接尋找API等。