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

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial