Javascript 如何使用react google maps库向单击的标记添加自定义标签？

我最近看了一个如何使用react google maps库的教程，但最后我没有找到如何实现以下目标：

我的应用程序从文件中读取坐标，并将其作为标记显示在地图上。现在有人能告诉我，当我点击特定标记时，如何设置标签“1”，以及下一个标签“2”等？这是我的密码

function Map() {
    const [selectedPark, setSelectedPark] = useState(null)
  return (
      <GoogleMap defaultZoom={10} defaultCenter={{lat: 45.421532, lng: -75.697189}}>
          {parksData.features.map( park =>(
              <Marker position={{lat: park.geometry.coordinates[1] , lng:  park.geometry.coordinates[0]}} 
 label="0" onClick={()=>
                  setSelectedPark(park)}/>
          ))}
          {selectedPark && (
              <InfoWindow position={{ lat: selectedPark.geometry.coordinates[1], lng: selectedPark.geometry.coordinates[0]}}
              onCloseClick={()=> {
                  setSelectedPark(null)
              }}>
    <div>test</div>
              </InfoWindow>
          )}
      </GoogleMap>
  );

函数映射（）{
常量[selectedPark，setSelectedPark]=useState（空）
返回(
{parksData.features.map（公园=>(
设置选定公园（公园）}/>
))}
{selectedPark&&(
{
setSelectedPark（空）
}}>
测试
)}
);

首先，不支持使用Google Maps标记对象。对于您的用例，您需要使用条件和状态来操纵

标记的标签

属性的值

您可以检查单击标记时如何更改标签。 首先，我有这种状态

markerid

要标记当前标记，

label

设置数字类型以数字方式操作数字，0作为起始数字

    this.state = {
      markerid: '',
      label: 0
    };

这是每次单击标记时我的函数，我首先获取状态标签的值，然后添加1，这样每次单击标记时它将增加到一个。然后我将标签的状态设置为新的数字，并将markerid状态设置为单击的标记的id

onMarkerClick = id => {
    var labelCount = this.state.label + 1;
    this.setState({
      markerid: id,
      label: labelCount
    });
  };

这是我的标记组件，我将json数据映射到标记。因为我们在循环中使用一个标记组件，如果我们直接为标签设置一个状态值，它将更改为所有标记。为此，我使用了一个条件来检查单击的标记（markerid状态）是否等于循环的特定marker.id，并只设置该标记的标签。我还将标记状态更改为字符串，因为标签需要字符串类型而不是数字。此代码唯一的一点是，单击其他标记后，它不会保留标签

 {data.map((marker, key) => (
          <Marker
            key={key}
            position={{ lat: marker.lat, lng: marker.lng }}
            onClick={() => this.onMarkerClick(marker.id)}
            {...this.state.markerid === marker.id && {
              label: this.state.label.toString()
            }}
          />
        ))}

{data.map（（标记，键）=>(
this.onMarkerClick（marker.id）}
{…this.state.markerid===marker.id&&{
label:this.state.label.toString（）
}}
/>
))}