如何使用 react-google-maps 库将自定义 label 添加到单击的标记？

Question

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

我的应用程序从文件中读取坐标并将其作为标记呈现在 map 上。 现在有人可以告诉我，当我单击特定标记时，如何设置 label “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>
  );

Answer 1

首先， react-google-maps Marker不支持 Google Maps Marker object 的setLabel方法。 对于您的用例，您需要使用条件和状态来操作Marker's label属性的值。

您可以查看此代码，了解当我单击标记时如何更改 label。 首先，我有这个 state。 markerid标记当前标记， label设置数字类型以数字方式操作数字，0 为起始数字。

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

Here's my function every time a Marker is clicked where I first get the value of the state label then add 1 so that it will increase to one everytime marker is clicked.then I set the state of the label to the new number and set the markerid state 到被点击的标记的 id。

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

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

 {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()
            }}
          />
        ))}