使用功能组件在google-map-react中向Google地图添加标记

在google-map-react中使用功能组件向Google地图添加标记，可以通过以下步骤实现：

首先，确保已经安装了google-map-react库。可以使用npm或yarn进行安装。
创建一个React组件，用于包含Google地图和标记。可以命名为MapContainer。
在MapContainer组件中，引入google-map-react库，并导入所需的组件和样式。

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

const Marker = ({ text }) => <div className="marker">{text}</div>;

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

  const markers = [
    { lat: 37.7749, lng: -122.4194, text: 'San Francisco' }, // 标记1的经纬度和文本
    { lat: 34.0522, lng: -118.2437, text: 'Los Angeles' }, // 标记2的经纬度和文本
    // 可以添加更多的标记
  ];

  return (
    <div className="map-container">
      <GoogleMapReact
        bootstrapURLKeys={{ key: 'YOUR_API_KEY' }} // 替换为你的Google地图API密钥
        defaultCenter={mapOptions.center}
        defaultZoom={mapOptions.zoom}
      >
        {markers.map((marker, index) => (
          <Marker key={index} lat={marker.lat} lng={marker.lng} text={marker.text} />
        ))}
      </GoogleMapReact>
    </div>
  );
};

export default MapContainer;

在上述代码中，我们定义了一个Marker组件，用于在地图上显示标记。可以根据需要自定义标记的样式。
在MapContainer组件中，我们设置了地图的中心点和缩放级别，并定义了一个markers数组，其中包含了要添加的标记的经纬度和文本。
在返回的JSX中，我们使用GoogleMapReact组件来渲染地图，并通过bootstrapURLKeys属性传递Google地图的API密钥。通过defaultCenter和defaultZoom属性设置地图的中心点和缩放级别。
在GoogleMapReact组件内部，我们使用map函数遍历markers数组，并为每个标记创建一个Marker组件。通过传递经纬度和文本作为属性，将标记添加到地图上。
最后，将MapContainer组件添加到你的应用程序中的适当位置，以显示带有标记的Google地图。

请注意，上述代码中的YOUR_API_KEY需要替换为你自己的Google地图API密钥。此外，你还可以根据需要自定义标记的样式和地图的初始设置。

推荐的腾讯云相关产品：腾讯云地图服务（https://cloud.tencent.com/product/tianditu）