React Google Maps在使用StandaloneSearchBox元件時遇到了「載入」狀態的問題

Question

我在我的ReactJS頁面上有一個頁面，我正在嘗試允許公司註冊我的網站並添加他們的位置，以便其他公司可以來租賃、購買等。如果可以的話，我還需要添加標記。我已經在我的頁面上放置了Google地圖，但是，我無法將搜尋列（StandaloneSearchBox）放在頁面上，因為它一直處於「載入」狀態。這是我的程式碼：import{useState,useEffect}from'react'import{Go

P粉810050669 · Answer

我認為問題在於沒有函式庫。為了顯示搜尋框，必須有一個庫。 const lib = ['places'];將places設定為一個函式庫，該函式庫必須加入到LoadScript程式碼中，其中包含您的API金鑰。更新後的程式碼應該已經解決了這個問題：

import {useState, useEffect } from 'react'
import { GoogleMap, LoadScript, StandaloneSearchBox } from '@react-google-maps/api'
const lib = ['places'];
const mapContainerStyle = {
  height: "400px",
  width: "800px"
}

const center = {
  lat: -3.745,
  lng: -38.523
};
  
const position = {
  lat: 37.772,
  lng: -122.214
}


const initialState = {
  company: '',
  email: '',
  password: '',
  isMember: true,
}

  const Register = () => {

    
    const [searchBox, setSearchBox] = useState(null);

  const handlePlacesChanged = () => console.log(searchBox.getPlaces());
  const handleLoad = ref => {
    setSearchBox(ref);
  };

    

  const [values, setValues] = useState(initialState)

  // global state and useNavigate
  const handleChange = (e) => {
    console.log(e.target)
  }

  const onSubmit = (e) => {
    e.preventDefault()
    console.log(e.target)
  }

    
      return (
        
        
              
              Direct Connection
                         
                                        
                
                

    
     
      
        Register
        
            
        
      
    


  Want to join and connect with companies? Sign up and get your company out there:
  
    Profile Photo:
      
    Company Name
      
        
      
    Email
          
          
          

     Map   

    
  
    
        
          <>
           
          
          
        
        
        

          
     

    
                  
                    
                      
                        
                          Direct Connection
                        
                        706-263-0175
                      
                    
                  
            


    )
}
  

export default Register