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

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

npm install react-google-maps

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

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

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>
    );
  }
}