我正在使用这个package.json
我用于Google Map的组件库是this

{
  "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"
  },
     ...

}

我的标记在Flash中绘制,然后消失了,谷歌 map 从不渲染,我的组件基于Google Map React的简单 map 的示例,当我尝试在React-Router中渲染它时,没有显示,App的children属性也显示为null。
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正常运行,这可能是由于某些更改所致。

最佳答案

我通过上课解决了这个问题。

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

问题是 map 容器必须具有高度或宽度,以百分比的形式给出高度和宽度无法使用。容器必须有自己的空间。在渲染。

关于google-maps - Google Map未在React App中呈现,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34721416/

10-14 17:25
查看更多