反应映射错误："Did you wrap <GoogleMap> component with withGoogleMap() HOC?"

Question

我正在使用 react-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

添加

<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 />)));

Answer 2

您可以使用这些：

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;

反应映射错误："Did you wrap <GoogleMap> component with withGoogleMap() HOC?"

Error with react-map:"Did you wrap <GoogleMap> component with withGoogleMap() HOC?"

google-maps

reactjs