0

我目前正在开发一个使用 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>
    );
  }
}
4

1 回答 1

3

要更改地图上触摸的标记上的图像标记，您需要切换 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>
      ))}

以这种方式，每个标记都在使用和更新它自己在数组中的状态。

于 2017-01-27T07:00:00.750 回答