在React中连接Google Maps的connect()函数的使用方法如下:
google-maps-react
库。可以使用以下命令进行安装:npm install google-maps-react
google-maps-react
库和connect
函数:import { Map, GoogleApiWrapper } from 'google-maps-react';
import { connect } from 'react-redux';
connect
函数将Google Maps组件与Redux store连接起来:class MapContainer extends React.Component {
// 组件的代码...
render() {
return (
<Map google={this.props.google} />
);
}
}
const mapStateToProps = (state) => ({
// 将需要的state映射到props中
});
export default connect(mapStateToProps)(
GoogleApiWrapper({
apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
})(MapContainer)
);
在上述代码中,MapContainer
是一个自定义的组件,它使用Map
组件来显示Google Maps。connect
函数将Redux store中的state映射到MapContainer
组件的props中,以便在组件中使用。
GoogleApiWrapper
是一个高阶组件,它接受一个包含Google Maps API密钥的配置对象,并返回一个新的组件。这个新的组件将Google Maps API作为google
属性传递给MapContainer
组件。
MapContainer
组件的父组件中,可以像使用任何其他React组件一样使用它:import MapContainer from './MapContainer';
class App extends React.Component {
render() {
return (
<div>
<h1>My App</h1>
<MapContainer />
</div>
);
}
}
export default App;
这样,你就可以在React中连接Google Maps的connect()
函数了。请注意,上述代码中的YOUR_GOOGLE_MAPS_API_KEY
应该替换为你自己的Google Maps API密钥。
推荐的腾讯云相关产品:腾讯云地图服务(https://cloud.tencent.com/product/maps)
领取专属 10元无门槛券
手把手带您无忧上云