Как загрузить библиотеку API Google Places JS в проект React? - PullRequest
Новая
       16

Как загрузить библиотеку API Google Places JS в проект React?

4 голосов
/ 29 сентября 2019

Я пользуюсь библиотекой реагировать-автозаполнения.Я понимаю, что я должен загрузить API, используя мой ключ.Я не могу понять, где разместить скрипт для ключа, чтобы программа работала.

Я видел страницу StackOverflow, где кто-то сказал, чтобы он статически загружался в index.js, и я попытался: 

import 'react-places-autocomplete';
...
ReactDOM.render(
    <div>
    <BrowserRouter>
        <App />
    </BrowserRouter>
    <script src="https://maps.googleapis.com/maps/api/js? 
     key=MY_KEY&libraries=places"></script>
    </div>
    , document.getElementById('root'));

Это не работает, я также пытался загрузить его непосредственно вкомпонент (который кажется неправильным): 

class My_Component extends React.Component {

...

render() {
    return (
        <div>
            <script src="https://maps.googleapis.com/maps/api/js? 
     key=MY_KEY&libraries=places"></script>
            <PlacesAutocomplete
                value={this.state.address}
                onChange={this.handleChange}
                onSelect={this.handleSelect}
            >

         ....

         </div>
        );
    }
}

Используя эти подходы, я получаю сообщение об ошибке «Должна быть загружена библиотека JavaScript API Карт Google, и я посмотрел документацию, и это не так»Не указывайте, где должен быть размещен тег, просто он должен быть где-то.

1 Ответ

4 голосов
/ 29 сентября 2019

Я использовал это в одном из моих проектов 

class PlacesAutocomplete1 extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    googleMapsReady: false,
  };
}

componentDidMount() {
    script is loaded here and state is set to true after loading
    this.loadGoogleMaps(() => {
    // Work to do after the library loads.
    this.setState({ googleMapsReady: true });
  });
}

componentWillUnmount() {
  // unload script when needed to avoid multiple google scripts loaded warning
  this.unloadGoogleMaps();
}

loadGoogleMaps = callback => {
    const existingScript = document.getElementById("googlePlacesScript");
    if (!existingScript) {
        const script = document.createElement("script");
        script.src =
            "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places";
        script.id = "googleMaps";
        document.body.appendChild(script);
        //action to do after a script is loaded in our case setState
        script.onload = () => {
            if (callback) callback();
        };
    }
    if (existingScript && callback) callback();
};

unloadGoogleMaps = () => {
    let googlePlacesScript = document.getElementById("googlePlacesScript");
    if (googlePlacesScript) {
        googlePlacesScript.remove();
    }
};

render() {
    if (!this.state.googleMapsReady) {
        return <p>Loading</p>;
    }
    return (
        // do something you needed when script is loaded
}
...