在设置反应谷歌地图时遇到问题答案

【问题标题】：Having an issue setting up react google maps在设置反应谷歌地图时遇到问题
【发布时间】：2018-01-16 11:31:54
【问题描述】：

我遇到了多个错误，不知道从那里去哪里。

缺少必需的道具 containerElement 或 mapElement。您需要同时提供它们。

google.maps.Map 实例将在 mapElement 上初始化，并由 containerElement 包装。您需要同时提供它们，因为 Google 地图要求 DOM 在初始化时具有高度。

这些都是显示的错误。我查看了文档，我知道我可能设置错了，但我真的不知道从文档中该怎么做。

代码如下：

GoogleMapPage：

import React, { Component } from 'react';

import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
const googleMapURL =
  'https://maps.googleapis.com/maps/api/js?v=3.27&libraries=places,geometry&key=AIzaSyA7XEFRxE4Lm28tAh44M_568fCLOP_On3k';

const GettingStartedGoogleMap = withGoogleMap(props =>
  <GoogleMap
    ref={props.onMapLoad}
    defaultZoom={3}
    defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
    googleMapURL={googleMapURL}
    onClick={props.onMapClick}
  >
    {props.markers.map(marker =>
      <Marker
        {...marker}
        onRightClick={() => props.onMarkerRightClick(marker)}
      />
    )}
  </GoogleMap>
);

class GettingStartedExample extends Component {
  render() {
    return (
      <GettingStartedGoogleMap
        containerElement={<div style={{ height: `100%` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    );
  }
}
export default withGoogleMap(GettingStartedExample);

App.js：

import React, { Component } from 'react';

import GettingStartedExample from './components/GoogleMapPage';

class App extends Component {
  render() {
    return (
      <div>
        <GettingStartedExample />
      </div>
    );
  }
}

export default App;

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

【问题讨论】：

标签： javascript reactjs google-maps google-maps-api-3

【解决方案1】：

你有 export default withGoogleMap(GettingStartedExample);

containerElement 和 mapElement 必须是 withGoogleMaps 之外的道具，以免为我抛出错误。它是否作为： export default GettingStartedExample;

【讨论】：