React Google Maps는 StandaloneSearchBox 구성 요소를 사용할 때 "로드" 상태에 문제가 있습니다
P粉138711794
2023-08-29 09:07:27
<p>내 React JS 페이지에 회사가 내 사이트에 등록하고 위치를 추가하여 다른 회사가 임대, 구매 등을 할 수 있도록 허용하려는 페이지가 있습니다. 가능하다면 마크업도 추가해야 합니다. 내 페이지에 Google 지도를 넣었지만 페이지가 "로드 중" 상태이기 때문에 페이지에 검색창(<code>StandaloneSearchBox</code>)을 넣을 수 없습니다. 내 코드는 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;">'react'에서 {useState, useEffect} 가져오기
'@react-google-maps/api'에서 { GoogleMap, StandaloneSearchBox, LoadScript }를 가져옵니다.
const 초기 상태 = {
회사: '',
이메일: '',
비밀번호: '',
isMember: 사실,
}
const 레지스터 = () =>
const mapContainerStyle = {
높이: "400px",
너비: "800px"
}
const 센터 = {
위도: -3.745,
lng: -38.523
};
const [values, setValues] = useState(initialState)
// 전역 상태 및 useNavigate
const handlerChange = (e) =>
console.log(e.target)
}
const onSubmit = (e) =>
e.preventDefault()
console.log(e.target)
}
const handlerLoad = ref => this.searchBox = ref;
const handlerPlacesChanged = () => console.log(this.searchBox.getPlaces());
반품 (
<body class="page-template-default 페이지 페이지-id-13">
<헤더 클래스="사이트 헤더">
<div class="컨테이너">
<h1 class="school-logo-text float-left"><a href="/landing"><strong>직접</strong> 연결</a></h1>
<div class="site-header__util">
</div>
</div>
</헤더>
<div class="페이지 배너">
<div class="page-banner__bg-image" style={ { backgroundImage: "url('connection.jpg')" }></div>
<div class="page-banner__content 컨테이너 컨테이너--narrow">
<h1 class="page-banner__title">등록</h1>
<div class="page-banner__intro">
<p></p>
</div>
</div>
</div>
<div class="컨테이너 컨테이너--좁은 페이지 섹션">
<h2 class="headline headline--tiny">회사에 가입하고 연결하고 싶으십니까? 가입하고 회사를 널리 알리세요:</h2>
<label class="header">프로필 사진:</label>
<입력 id="이미지" 유형="파일" 이름="프로필_사진" 자리 표시자="사진" 필수="" 캡처></입력>
<label class="company-name">회사 이름</label>
<div class="company-input">
<입력 텍스트="제목 제목--입력" placeholder="회사 입력"></input>
</div>
<label class="회사-이메일">이메일</label>
<div class="email-input">
<입력 텍스트="제목 제목--입력" placeholder="이메일 입력"></input>
</div>
<label class="company-map">지도</label>
<div class="map-input">
<로드스크립트
googleMapsApiKey='API_HERE'>
<Google지도
id="지도"
mapContainerStyle={mapContainerStyle}
센터={센터}
확대/축소={10}
>
<독립형 검색 상자
onLoad={handleLoad}
onPlacesChanged={handlePlacesChanged}
>
<입력
유형="텍스트"
placeholder="자리 표시자를 맞춤설정했습니다"
스타일={{
boxSizing: `테두리 상자`,
테두리: `1px 솔리드 투명`,
너비: `240px`,
높이: `32px`,
패딩: `0 12px`,
borderRadius: `3px`,
boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
글꼴 크기: `14px`,
개요: '없음',
textOverflow: `타원`,
위치: "절대",
왼쪽: "50%",
marginLeft: "-120px"
}}
/>
</독립형 검색 상자>
</Google지도>
</로드스크립트>
</div>
</div>
<바닥글 클래스="사이트-바닥글">
<div class="site-footer__inner 컨테이너 컨테이너--좁음">
<div 클래스="그룹">
<div class="site-footer__col-one">
<h1 class="school-logo-text school-logo-text--alt-color">
<a href="/landing"><strong>직접 연결</strong>
</h1>
<p><a class="site-footer__link" href="index.html">706-263-0175</a></p>
</div>
</div>
</div>
</바닥글>
</body>
)
}
기본 레지스터 내보내기</pre>
<p>../api/docs 폴더의 <code>ScriptLoaded</code> 파일에서 가져오기를 더 추가하려고 했지만 이로 인해 전체 페이지가 공백이 되었습니다. '@react-google-maps/api'</code>의 <code>import {}에서 <code>StandaloneSearchBox</code> 코드, 주소 검색을 위한 검색 표시줄 및 마크업 없이 페이지에 정상적으로 표시됩니다(<code>StandaloneSearchBox</code>)</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
도서관이 없다는 게 문제인 것 같아요. 검색창을 표시하려면 라이브러리가 필요합니다.
으아악const lib = ['places'];将places设置为一个库，该库必须添加到LoadScriptAPI 키가 포함된 코드. 업데이트된 코드로 문제가 해결되었을 것입니다: