简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
React Google Maps는 StandaloneSearchBox 구성 요소를 사용할 때 "로드" 상태에 문제가 있습니다
P粉138711794
P粉138711794 2023-08-29 09:07:27
0
1
535
<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>
P粉138711794
P粉138711794

모든 응답(1)
P粉810050669
P粉8100506692023-08-30 00:16:09 1층

도서관이 없다는 게 문제인 것 같아요. 검색창을 표시하려면 라이브러리가 필요합니다. const lib = ['places'];将places设置为一个库，该库必须添加到LoadScript API 키가 포함된 코드. 업데이트된 코드로 문제가 해결되었을 것입니다:

으아악
좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！