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

在React中使用google-map-react创建静态地图，可以按照以下步骤进行操作：

首先，确保你已经在项目中安装了google-map-react库。可以使用以下命令进行安装：

npm install google-map-react

在你的React组件中，引入google-map-react库：

import GoogleMapReact from 'google-map-react';

创建一个新的React组件，并在其中使用GoogleMapReact组件来显示地图：

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;

在上述代码中，需要将YOUR_API_KEY替换为你自己的Google Maps API密钥。如果你还没有API密钥，可以按照以下步骤获取：
- 访问Google Cloud Platform控制台。
- 创建一个新的项目或选择现有项目。
- 在项目中启用"Maps JavaScript API"。
- 在"凭据"部分创建一个API密钥。

在你的应用程序中使用Map组件：

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

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

export default App;

通过以上步骤，你就可以在React中使用google-map-react库创建静态地图了。你可以根据需要自定义地图的中心点、缩放级别等参数。同时，你还可以通过google-map-react库的其他属性和方法来实现更多的地图功能。