如何在react-google-maps中添加自定义按钮？

在react-google-maps中添加自定义按钮可以通过以下步骤实现：

首先，确保已经安装了react-google-maps库。可以使用以下命令安装：

npm install react-google-maps --save

在你的React组件文件中，导入所需的库和组件：

import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';

创建一个包含自定义按钮的React组件，并将其添加到GoogleMap组件中：

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事件处理程序中添加自定义逻辑。

希望这个答案对你有帮助！如果你对其他问题或概念有进一步的了解，可以继续提问。