如何在react中使用google- map -react创建静态地图？

npm install google-map-react

import GoogleMapReact from 'google-map-react';

import React from 'react';
import GoogleMapReact from 'google-map-react';

const Map = () => {
  const mapOptions = {
    center: { lat: 37.7749, lng: -122.4194 }, // 地图中心点的经纬度
    zoom: 10, // 缩放级别
  };

  return (
    <div style={{ height: '400px', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: 'YOUR_API_KEY' }} // 替换为你的Google Maps API密钥
        defaultCenter={mapOptions.center}
        defaultZoom={mapOptions.zoom}
      />
    </div>
  );
};

export default Map;

import React from 'react';
import Map from './Map';

const App = () => {
  return (
    <div>
      <h1>静态地图示例</h1>
      <Map />
    </div>
  );
};

export default App;