React Google Maps hat Probleme mit dem „Ladestatus“, wenn die StandaloneSearchBox-Komponente verwendet wird

Question

Ich habe eine Seite auf meiner ReactJS-Seite, auf der ich Unternehmen die Möglichkeit geben möchte, sich auf meiner Website zu registrieren und ihren Standort hinzuzufügen, damit andere Unternehmen mieten, kaufen usw. kommen können. Wenn möglich, muss ich auch Markup hinzufügen. Ich habe eine Google Map auf meiner Seite eingefügt, kann die Suchleiste (StandaloneSearchBox) jedoch nicht auf der Seite platzieren, da sie im Status „Laden“ bleibt. Das ist mein Code: 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

React Google Maps hat Probleme mit dem „Ladestatus“, wenn die StandaloneSearchBox-Komponente verwendet wird

Antworte allen(1)Ich werde antworten