在react-google-maps中添加自定义按钮可以通过以下步骤实现:
npm install react-google-maps --save
import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
const MapWithCustomButton = withGoogleMap(props => (
<GoogleMap
defaultZoom={12}
defaultCenter={{ lat: -34.397, lng: 150.644 }}
>
<button
style={{
position: 'absolute',
top: '10px',
left: '10px',
padding: '10px',
background: 'white',
border: '1px solid gray',
borderRadius: '5px',
zIndex: 1,
}}
onClick={() => {
// 处理按钮点击事件
}}
>
自定义按钮
</button>
</GoogleMap>
));
4. 在你的React组件中,使用MapWithCustomButton组件来渲染地图和自定义按钮:
```javascript
class MyMapComponent extends React.Component {
render() {
return (
<MapWithCustomButton
containerElement={<div style={{ height: '400px' }} />}
mapElement={<div style={{ height: '100%' }} />}
/>
);
}
}
这样就在react-google-maps中添加了一个自定义按钮。你可以根据自己的需求来调整按钮的样式和位置,并在按钮的onClick事件处理程序中添加自定义逻辑。
希望这个答案对你有帮助!如果你对其他问题或概念有进一步的了解,可以继续提问。
领取专属 10元无门槛券
手把手带您无忧上云