在google-maps-react的单独组件中使用标记

，可以通过以下步骤实现：

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

npm install google-maps-react

在需要使用标记的组件中，引入google-maps-react库：

import { Map, Marker, GoogleApiWrapper } from 'google-maps-react';

创建一个包含地图和标记的组件，并使用GoogleApiWrapper高阶组件包装：

class MapContainer extends React.Component {
  render() {
    return (
      <Map google={this.props.google} zoom={14}>
        <Marker
          title={'Marker Title'}
          name={'Marker Name'}
          position={{ lat: 37.7749, lng: -122.4194 }}
        />
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
})(MapContainer);

在上面的代码中，Map组件是地图容器，Marker组件是标记。可以通过设置Marker的title、name和position属性来自定义标记的标题、名称和位置。

在上述代码中，需要替换YOUR_GOOGLE_MAPS_API_KEY为你自己的Google Maps API密钥。如果还没有API密钥，可以按照以下步骤获取：
- 访问Google Cloud控制台（https://console.cloud.google.com/）
- 创建一个新项目或选择现有项目
- 在“API和服务”>“凭据”页面中创建一个新的API密钥
- 将API密钥替换为上述代码中的YOUR_GOOGLE_MAPS_API_KEY

最后，在需要使用地图和标记的父组件中，引入MapContainer组件：

import MapContainer from './MapContainer';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Google Maps with Marker</h1>
        <MapContainer />
      </div>
    );
  }
}

export default App;

通过以上步骤，你可以在google-maps-react的单独组件中使用标记。这样可以在地图上显示一个标记，并自定义标记的标题、名称和位置。你可以根据需要在MapContainer组件中添加更多的标记。

腾讯云相关产品和产品介绍链接地址：