要使用React JS将FusionTablesLayer放入Google Maps API,可以按照以下步骤进行操作:
import React, { Component } from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';
class MapContainer extends Component {
render() {
const mapStyles = {
width: '100%',
height: '100%'
};
const fusionTableLayerOptions = {
query: {
select: 'location',
from: 'YOUR_FUSION_TABLE_ID'
},
heatmap: {
enabled: true
}
};
return (
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{ lat: 37.7749, lng: -122.4194 }}
>
<FusionTablesLayer options={fusionTableLayerOptions} />
</Map>
);
}
}
在上面的代码中,你需要将YOUR_FUSION_TABLE_ID
替换为你自己的Fusion Table的ID。
export default GoogleApiWrapper({
apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
})(MapContainer);
在上面的代码中,你需要将YOUR_GOOGLE_MAPS_API_KEY
替换为你自己的Google Maps API密钥。
现在,你可以在你的应用程序中使用MapContainer
组件来显示包含FusionTablesLayer的Google Maps。
领取专属 10元无门槛券
手把手带您无忧上云