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;

react-map出错：“你用googleMap（）HOC包装<googlemap>组件了吗？”

2 个答案: