Google地图不是在React App中渲染的 [英] Google Map is Not Rendering in React App
问题描述
我正在使用这个package.json
我正在使用的组件库是用于google地图的这
I am working with this package.json The library i am using for component I am using for google map is 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中绘制,然后消失,谷歌地图从不呈现,我的组件基于
My marker draw in flash and then they disappear, google map never renders, my component is based on example of Simple map of Google Map React, when i try to render it in React-Router, Nothing displays also children property of App appears to be 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,可能是由于一些变化。
Any help would be much appreciated, my so far best guess has been that its not working properly with React 0.14, probably due to some changes.
推荐答案
我通过应用类来解决问题。
I fixed the issue by applying class.
.map {
width: 1000px;
height: 1000px;
}
问题是地图容器必须有高度或宽度, > height 和 width 在 percent 中不会起作用。容器必须有自己的空间。将被呈现。
the issue was the map container must have a height or width, giving height and width in percent wont work. The container must have its own space. to be rendered at.
这篇关于Google地图不是在React App中渲染的的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!