我在我的项目中使用webpack和reactjs,现在我想集成google map api。首先,我在package.json文件中添加了“ react-google-maps”:“ ^ 4.9.1”。下面是我的组件类。
import React, {PropTypes, Component} from 'react';
import { GoogleMap, Marker, SearchBox } from "react-google-maps";
import shouldPureComponentUpdate from 'react-pure-render/function';
const greatPlaceStyle = {
// initially any map object has left top corner at lat lng coordinates
// it's on you to set object origin to 0,0 coordinates
position: 'absolute',
width: 512,
height: 512,
left: 512 / 2,
top: 512 / 2,
border: '5px solid #f44336',
borderRadius: 512,
backgroundColor: 'white',
textAlign: 'center',
color: '#3f51b5',
fontSize: 16,
fontWeight: 'bold',
padding: 4
};
export default class SimpleMapPage extends Component {
static defaultProps = {
center: {lat: 59.938043, lng: 30.337157},
zoom: 1,
greatPlaceCoords: {lat: 59.724465, lng: 30.080121}
};
shouldComponentUpdate = shouldPureComponentUpdate;
constructor(props) {
super(props);
}
render() {
return (
<GoogleMap>
defaultCenter={this.props.center}
defaultZoom={this.props.zoom}>
<MyGreatPlace lat={59.955413} lng={30.337844} text={'A'} />
<MyGreatPlace {...this.props.greatPlaceCoords} text={'B'} />
</GoogleMap>
);
}
}
export default class MyGreatPlace extends Component {
static propTypes = {
text: PropTypes.string
};
static defaultProps = {};
//shouldComponentUpdate = shouldPureComponentUpdate;
constructor(props) {
super(props);
}
render() {
return (
<div style={greatPlaceStyle}>
{this.props.text}
</div>
);
}
}
在index.html文件中,添加了以下javascripts。第一个是goold map api依赖项。第二个是由webpack打包的bundle.js。当我访问我的应用程序时,没有显示谷歌地图。我认为问题将无法在我的组件类上导入google map api。导入googleapis的正确方法是什么?
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA2sDQZ-36NLlY4iMvoiuQ7mS1n-v8iq2M" async defer></script>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
我本来可以发表评论,但我还没有发表评论的权力。您是否尝试过将组件呈现为从请求到Google Maps的回调的一部分?我想知道请求的异步性质是否正在影响其显示。
考虑像这样包含您的Google地图:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
在您的代码中:
let initMap = () => {
ReactDOM.render(
<SimpleMapPage />,
document.getElementById('...')
);
}
我没有看到您在任何地方创建该组件的新实例,但是我认为您已经创建了。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句