Question

我目前正在使用使用React Native Maps的应用程序。我已经看过他们放置多个标记的示例以及如何在按下时更改标记的状态，我希望能够将这两个函数组合在一起。我希望能够放下多个标记，然后在按下时更改单个标记的状态。我已经成功放下了多个标记，但是当按下时，所有标记的状态都会改变。我想知道该怎么做，因此标记会在按下时改变各个状态。感谢您的帮助。

以下是我使用的React Native Maps示例的链接： https://github.com/airbnb/react-native-maps/blob/master/example/examples/DefaultMarkers.js

https://github.com/airbnb/react-native-maps/blob/master/example/examples/MarkerTypes.js

这是我目前的代码

const SPACE = 0.01;
let id = 0;

class MarkerTypes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      marker1: true,
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      },
      markers: [],
    };
  }

  onMapPress(e) {
    console.log(e)
    this.setState({
      markers: [
        ...this.state.markers,
        {
          coordinate: e.nativeEvent.coordinate,
          key: id++,
          marker1: true,
        },
      ],
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <MapView
          provider={this.props.provider}
          style={styles.map}
          initialRegion={this.state.region}
          onPress={(e) => this.onMapPress(e)}
        >

          {this.state.markers.map(marker => (
          <MapView.Marker
            key={marker.key}
           })}
            onPress={() => {
              this.setState({ marker1: !this.state.marker1 })}
            }
            coordinate={marker.coordinate}         
            image={this.state.marker1 ? flagBlueImg : flagPinkImg}
          >
          </MapView.Marker>
          ))}
        </MapView>
      </View>
    );
  }
}

Answer 1

要更改地图上触摸的标记上的图像标记，您需要在this.state.markers数组内的标记处切换标记属性，例如this.state.markers [0] .marker1，目前您正在切换由所有标记共享的this.state.marker1

{this.state.markers.map((marker, index) => (
    <MapView.Marker 
        key={marker.key}
        onPress={() => {
          const marker = this.state.markers[index]
          marker.marker1 = !marker.marker1
          this.setState({ markers: [
              ...this.state.markers.slice(0, index),
              marker,
              ...this.state.markers.slice(index + 1)
          ]})}
        }
        coordinate={marker.coordinate}         
        image={marker.marker1 ? flagBlueImg : flagPinkImg}
      >
      </MapView.Marker>
      ))}

这样每个标记都在使用并更新它在数组中的自身状态。

React Native Maps：放置多个标记并更改状态

1 个答案: