如何在react js中从<Map>中删除现有的<Marker>组件？

在React JS中，要从<Map>组件中删除现有的<Marker>组件，您可以遵循以下步骤：

在组件的状态中跟踪已添加的标记。
创建一个函数以删除指定ID的标记。
在渲染方法中遍历标记数组，并为每个标记渲染一个<Marker>组件。
为删除标记的操作添加一个事件处理程序。

这是一个简单的示例：

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

class MapContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      markers: [
        { id: 1, lat: 37.7749, lng: -122.4194 },
        { id: 2, lat: 37.7749, lng: -122.4194 },
      ],
    };
  }

  // 删除指定ID的标记
  deleteMarker = (id) => {
    this.setState((prevState) => ({
      markers: prevState.markers.filter((marker) => marker.id !== id),
    }));
  };

  render() {
    return (
      <div style={{ width: '100%', height: '100%' }}>
        <Map
          google={this.props.google}
          initialCenter={{
            lat: 37.7749,
            lng: -122.4194,
          }}
          zoom={13}
        >
          {this.state.markers.map((marker) => (
            <Marker
              key={marker.id}
              position={{ lat: marker.lat, lng: marker.lng }}
              onClick={() => this.deleteMarker(marker.id)}
            />
          ))}
        </Map>
      </div>
    );
  }
}

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

在这个示例中，我们首先在state中创建一个包含标记的数组。然后，当点击某个标记时，我们调用deleteMarker方法并传递该标记的ID。deleteMarker方法使用filter从数组中删除具有指定ID的标记。最后，在render方法中，我们遍历markers数组并为每个标记渲染一个<Marker>组件。