Question

可以从地图视图中删除标记吗？如何从谷歌地图视图中删除标记。我使用＆＃34; react-native-maps＆＃34;显示谷歌地图。

请帮助。

Answer 1

要能够删除或添加标记，您只需要执行此操作

//Note : my map markers is => this.props.markers

componentDidMount() {
    this.renderMarkers(this.props.markers)
}


async renderMarkers(mapMarkers) {
    let markers = [];
    markers = mapMarkers.map(marker => (<Marker
            key={marker.code}
            coordinate={{latitude: marker.lat, longitude: marker.lng}}
            onPress={{}}
        />)
    );
    this.setState({markers});
}


refreshMarkers() {
    this.renderMarkers(this.props.markers).then(() => {
        this.forceUpdate();
    });
}


render() {
    return (
        <MapView
            ref={(ref) => this.mapView = ref}
            style={styles.map}
            region={this.props.coordinate}
        >
            {this.state.markers}
        </MapView>
    );
}

Answer 2

这就是我的做法。本质上，您需要在状态中保留一组标记，然后从状态中移除您要删除的标记。

我将标记列表存储在状态中，如下所示：

this.state = {
  markers: [],
};

当您实际创建标记时，您在函数中传递索引，该函数将从状态中删除标记。在这种情况下 onMarkerPress(index)

  createMarkers() {
    return this.state.markers.map((marker, index) => (
      <Marker
        draggable
        onPress={event => this.onMarkerPress(index)}
        key={index}
        coordinate={{
          latitude: parseFloat(marker.latitude),
          longitude: parseFloat(marker.longitude),
        }}
      />
    ));
  }

这是 onMarkerPress 函数：

  onMarkerPress(index) {
    this.state.markers.splice(index, 1);
    this.setState({markers: this.state.markers});
  }

最后，您的地图组件将如下所示：

<MapView
          style={styles.map}
          mapType={'satellite'}
          provider={PROVIDER_GOOGLE}
          initialRegion={{
            latitude: 45.50235905860018,
            longitude: -73.60357092645054,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          onLongPress={e => this.addNewMarker(e)}>
          {this.createMarkers()}
        </MapView>

就是这样！

从本地地图中的google地图中删除标记

2 个答案: