表單字段

在下一個組件的頂部，導入以下依賴項

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

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

const庫 = [ “地點” ];

3. 使用 useLoadScript 初始化腳本

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

    ： process.env.NEXT_PUBLIC_GOOGLE_API_KEY ，庫    ，  });

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

4. 定義一個 useState 來保存你的輸入字段，以及一個 useRef 來引用你想要 Autocomplete API 的輸入

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

  const inputRef = useRef（null）;

5. 定義一個 useEffect 鉤子，將自動完成API 附加到輸入字段，這也允許你向自動完成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]）;

那里的選項對象包含對自動完成API 的可選限制。讓我們來分解一下

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

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

6. 為輸入定義 onChange 函數

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

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

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

  };

7. 定義 placeChange 函數來處理用戶選擇預測時發生的情況

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

    if (!isLoaded) return ; 

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

該函數處理兩件事

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

II. 將返回的數據傳遞給處理表單填寫的另一個函數

8. 定義處理表單填寫的函數

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經度 = 數據？.幾何？.位置？. lng (); 

    setInput（（值）=>（{ 
      ...值，
      街道地址：格式化地址，
      國家：componentMap.國家，
      郵政編碼：componentMap.郵政編碼，
      城市：componentMap.行政區域級別 2，
      州：componentMap.行政區域級別1 ，
      緯度：緯度，
      經度：經度，
    }））；
  }；