首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

这是一个简单的示例:

代码语言:javascript
复制
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>组件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券