尝试使用React在我的About页面上添加一个简单的google地图

在React中添加一个简单的Google地图可以通过以下步骤完成：

首先，确保你已经在项目中安装了React和相关依赖。你可以使用以下命令来创建一个新的React应用：

npx create-react-app my-app
cd my-app

在About页面的组件文件中，你可以使用react-google-maps库来集成Google地图。首先，安装该库：

npm install react-google-maps

在About页面的组件文件中，导入所需的模块：

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

创建一个新的函数组件，并使用withGoogleMap高阶组件包装它：

const MapComponent = withGoogleMap(() => (
  <GoogleMap
    defaultZoom={10}
    defaultCenter={{ lat: 37.7749, lng: -122.4194 }} // 设置地图的默认中心位置
  >
    <Marker position={{ lat: 37.7749, lng: -122.4194 }} /> // 在地图上添加一个标记
  </GoogleMap>
));

在组件的render方法中，使用MapComponent组件来显示地图：

class About extends React.Component {
  render() {
    return (
      <div>
        <h1>About Page</h1>
        <MapComponent
          containerElement={<div style={{ height: '400px', width: '100%' }} />}
          mapElement={<div style={{ height: '100%' }} />}
        />
      </div>
    );
  }
}