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