我在我的项目中使用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 dependency。第二个是由webpack打包的bundle.js。当我访问我的应用程序时,谷歌地图没有显示出来。我认为这个问题将无法导入我的组件类的谷歌地图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>
如何链接html到我的组件?我把所有的js都打包成了一个大的js文件,并且从我的html中引用它。如果我把回调放到html中,它如何链接到我的js或组件? –
您的内联脚本可以引用外部脚本,因为它们都位于全局名称空间内。 –