Ошибка с response-map: "Вы обернули <GoogleMap>компонент с помощью GoogleMap () HOC?"

Question

Я запускаю веб-приложение, используя act-google-maps .Я только начал кодировать это, и я получаю эту ошибку:

Did you wrap <GoogleMap> component with withGoogleMap() HOC?
▶ 21 stack frames were collapsed.
./src/index.js
src/index.js:7
   4 | import App from './App';
   5 | import registerServiceWorker from './registerServiceWorker';
   6 | 
>  7 | ReactDOM.render(<App />, document.getElementById('root'));
   8 | registerServiceWorker();
   9 | 
  10 | 
View compiled
▶ 6 stack frames were collapsed.

Вот код:

class App extends Component {
  render() {
    return (
      <div className="App">
          <GoogleMap/>
      </div>
    );
  }
}

export default App;

Очевидно, что в коде нет ничего плохого и может быть проблема с версией.Вот мои зависимости:

"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-google-maps": "^9.4.5",
"react-scripts": "1.1.4"

Есть идеи?

Answer 1

Вы можете использовать это:

import React, { Component, Fragment } from "react";

import {
    withScriptjs,
    withGoogleMap,
    GoogleMap,
    Marker
} from "react-google-maps";


class Map extends Component{

    static defaultProps = {
        googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSySEDDFRGFQSw2OjzDEE1-tDsN7vw&v=3.exp&libraries=geometry,drawing,places",
    }

    constructor(props) {
        super(props);
    }



    CMap = withScriptjs(withGoogleMap(props =>
        <GoogleMap
          defaultZoom={8}
          defaultCenter={{ lat: -34.397, lng: 150.644 }}
        >
            {props.children}
        </GoogleMap>
      ));



    render() {
        return (
            <Fragment>
                <this.CMap
                    googleMapURL={this.props.googleMapURL}
                    loadingElement={<div style={{ height: `100%` }} />}
                    containerElement={<div style={{ height: `700px` }} />}
                    mapElement={<div style={{ height: `100%` }} />}
                    center= {{ lat: 25.03, lng: 121.6 }} 
                >
                    <Marker
                        position={{ lat: -34.397, lng: 150.644 }}
                    />
                </this.CMap>
            </Fragment>
        );
    }
}


export default Map;

Answer 2

Добавьте

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY></script>

в ваш html-файл, и у вас все будет хорошо (конечно, измените их ключ).

Или оберните сценарий с помощью withScript () примерно так:

import withScriptjs from 'react-google-maps/lib/async/withScriptjs';


const myMap = withScriptjs(withGoogleMap((props) => 
(<GoogleMap />)));