key 相关问题

“google api 已经呈现” 1. </...</desc> <question vote="6"> <p>“Google api 已经呈现”</p> <p><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvVE9XSEQuanBn" alt="Screen shoot error explanation"/></p> <p><strong>1.</strong></p> <pre><code><script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=GOOGLE API KEY0&libraries=places"></script> <script> function init() { var options = { types: ['(cities)'], componentRestrictions: {country: "au"} }; var input = document.getElementById('citySearch'); var autocomplete = new google.maps.places.Autocomplete(input,options); } google.maps.event.addDomListener(window, 'load', init); </script> </code></pre> <p><strong>2</strong></p> <pre><code> return ( <div className="googleMapContainer"> {console.log(window.google)} <LoadScript googleMapsApiKey={googleApiKey}> <div className="googleMap"> <GoogleMap </code></pre> <p>如何处理？一个 api 密钥位于index.html 中，另一个试图使用 api 密钥作为组件react-google-maps</p> </question> <answer tick="false" vote="12"> <p>如果其他人发现此谷歌提供了另一个用于加载脚本的 API，而不是使用 <pre><code><LoadScript></code></pre>。</p> <pre><code> const { isLoaded } = useJsApiLoader({ id: 'google-map-script', googleMapsApiKey: 'YOUR API KEY HERE', libraries: ['geometry', 'drawing'], }); </code></pre> <p>然后你可以稍后使用<pre><code>isLoaded</code></pre>：</p> <pre><code>{isLoaded && <GoogleMap onLoad={saveMap} mapContainerClassName={classes.mapContainer} mapContainerStyle={containerSize} center={DefaultCenterPoint} options={options} > {mapItems} </GoogleMap>} </code></pre> <p>如果地图 API 已经加载，这会自动处理:)</p> </answer> <answer tick="false" vote="3"> <p>尝试在代码中不使用 <pre><code><GoogleMap /></code></pre> <pre><code><LoadScript /></code></pre> 2。查看更多<a href="https://github.com/JustFly1984/react-google-maps-api/issues/70#issuecomment-477493460" rel="nofollow noreferrer">这里</a></p> <p>或者，您可以将 LoadScript 移至不渲染太多的父组件，最好靠近树的根部。</p> </answer> <answer tick="false" vote="2"> <p>在再次加载脚本之前，您必须首先检查脚本是否已加载，这里是react.js上的示例代码 <pre><code>{window.google === undefined ? <LoadScript><GoogleMap /></LoadScript> : <GoogleMap />}</code></pre></p> </answer> <answer tick="false" vote="1"> <p>当您多次尝试加载谷歌地图 API 时，您会收到错误消息 <pre><code>google API is already presented in react app</code></pre>。对于您的情况，您从第一个片段加载了 google API 脚本 <pre><code><script ... /></code></pre>。您还在第二个片段中使用了 <pre><code><LoadScript .../></code></pre>，其作用相同。</p> <p>因此，要消除该错误，您必须加载一次 Google Maps API。</p> </answer> <answer tick="false" vote="0"> <p>我还在reactJs 18中使用了该思路中的一些东西（地图组件被包装到备忘录中，即“导出默认备忘录（地图）;”，因此仅当其道具发生变化时才会渲染<loadScript ..>将键作为参数。 </p> <pre><code> <div> ( typeof window !== 'undefined' && window.google ? ( <Map/> ) : ( <LoadScript ..><Map/> </LoadScript> ) )} </div> </code></pre> </answer> </body></html>

reactjs api key

回答 0 投票 0

key 相关问题

最新问题