#reactjs #api #key
#reactjs #API #Клавиша
Вопрос:
«google api уже представлен»
1.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=GOOGLE API KEY0amp;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>
2
return (
<div className="googleMapContainer">
{console.log(window.google)}
<LoadScript googleMapsApiKey={googleApiKey}>
<div className="googleMap">
<GoogleMap
как с этим справиться?
один ключ API находится в index.html а другой пытается использовать ключ api в качестве реквизита для компонента react-google-maps
Ответ №1:
На случай, если кто-то еще обнаружит это, Google предлагает другой API для загрузки скриптов вместо использования <LoadScript>
.
const { isLoaded } = useJsApiLoader({
id: 'google-map-script',
googleMapsApiKey: 'YOUR API KEY HERE',
libraries: ['geometry', 'drawing'],
});
Тогда вы можете просто использовать isLoaded
позже:
{isLoaded amp;amp; <GoogleMap
onLoad={saveMap}
mapContainerClassName={classes.mapContainer}
mapContainerStyle={containerSize}
center={DefaultCenterPoint}
options={options}
>
{mapItems}
</GoogleMap>}
Это автоматически обрабатывает, если maps API уже загружен 🙂
Ответ №2:
Попробуйте <GoogleMap />
без <LoadScript />
в коде 2. Подробнее здесь
В качестве альтернативы вы можете переместить loadScript в родительский компонент, который не отображает много, предпочтительно близко к корню вашего дерева.
Ответ №3:
вы должны сначала проверить, заблокирован ли скрипт, прежде чем загружать его снова. вот пример кода на react.js {window.google === undefined ? <LoadScript><GoogleMap /></LoadScript> : <GoogleMap />}
Ответ №4:
Вы получаете сообщение об ошибке google API is already presented in react app
при попытке загрузить Google maps API более одного раза. В вашем случае вы загрузили скрипт Google API <script ... />
из своего первого фрагмента. Вы также использовали <LoadScript .../>
во втором фрагменте, который делает то же самое.
Итак, чтобы избавиться от этой ошибки, вам нужно один раз загрузить Google Maps API.