Google地图在React App中无法渲染

Question

我正在使用这个package.json我用于谷歌地图的组件的库是这个

{
  "name": "webpack-win",
  "version": "1.0.0",
  "description": "none",
...
  "dependencies": {
    "alt": "^0.18.1",
    "alt-container": "^1.0.0",
    "google-map-react": "^0.9.3",
    "history": "^1.17.0",
    "material-design-icons": "^2.1.3",
    "material-ui": "^0.14.1",
    "open-browser-webpack-plugin": "0.0.2",
    "react": "^0.14.5",
    "react-dom": "^0.14.5",
    "react-router": "^1.0.3",
    "react-tap-event-plugin": "^0.2.1"
  },
     ...

}

我的标记画在闪光灯然后它们消失了,谷歌地图永远不会渲染,我的组件是基于谷歌地图反应的简单地图的例子,当我尝试在React-Router中渲染它时,没有显示App的儿童属性似乎是空值.

import React from 'react';
import shouldPureComponentUpdate from 'react-pure-render/function';
import GoogleMap from 'google-map-react';
import MyGreatPlace from './MapPlace.js';

export default class SimpleMapPage extends React.Component {
    static propTypes = {
        center: React.PropTypes.array,
        zoom: React.PropTypes.number,
        greatPlaceCoords: React.PropTypes.any
    };

    static defaultProps = {
        center: [59.938043, 30.337157],
        zoom: 9,
        greatPlaceCoords: {lat: 59.724465, lng: 30.080121}
    };

    shouldComponentUpdate = shouldPureComponentUpdate;

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="map">
                i worked
            <GoogleMap
                // apiKey={YOUR_GOOGLE_MAP_API_KEY} // set if you need stats etc ...
                center={this.props.center}
                zoom={this.props.zoom}>
                <MyGreatPlace lat={59.955413} lng={30.337844} text={'A'} /* Kreyser Avrora */ />
                <MyGreatPlace {...this.props.greatPlaceCoords} text={'B'} /* road circle */ />
            </GoogleMap>
                </div>
        );
    }
}

我的应用看起来像这样

const App = React.createClass({
  render() {
    return (
        <div>
          {this.props.children}
        </div>
    )
  }
})

render((
    <Router>
      <Route path="/" component={App}>
        <IndexRoute component={Map}/>
        <Route path="home" component={Home} />
        <Route path="location" component={Locations}/>
        <Route path="map" componenet={Map}/>
      </Route>
    </Router>
), document.getElementById('ReactApp'))

任何帮助将不胜感激,我最好的猜测是它与React 0.14不能正常工作,可能是由于一些变化.

Answer 1

我通过申请课来解决这个问题.

.map {
    width: 1000px;
    height: 1000px;
}

这个问题是在地图容器必须有一个高度或宽度,让高度和宽度的百分比不会工作.容器必须有自己的空间.要渲染.