Question

我已经实现了带有react-native-maps的MapView。我试图通过单击更改Marker的pinColor。

注意：我有很多标记。因此，我认为刷新所有视图不是一个好的解决方案。我需要直接更改所选标记的颜色。

我没有找到方法。我尝试了以下代码：

class TestMap extends React.Component {
constructor(props) {

this.state = {
    testColor: "#FFFFFF",
    userLatitude:0,
    userLongitude:0,
    data:[]
}
}

render() {
return (
<MapView
        provider={PROVIDER_GOOGLE}
        showsTraffic={true}
        showsBuildings={true}
        toolbarEnabled={true}
        loadingEnabled={true}
        style={styles.map}
        initialRegion={{
          latitude: this.state.userLatitude,
          longitude: this.state.userLongitude,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA
        }}
        onPoiClick={this.onPoiClick}
        showsUserLocation={true}
        followsUserLocation={true}
        showsMyLocationButton={true}
        loadingBackgroundColor="#FEA405"
        loadingIndicatorColor="white"
        onLongPress={e => this.onMapPress(e)}
        enableZoomControl
      >
        {this.ListMarkers()}
</MapView>
)};

ListMarkers() {
return this.state.data.map((data, i) => {
  return (
    <Marker
      key={i}
      onPress={e => this.onPressMarker(e, i, data)}
      coordinate={{
        longitude: data.LONGITUDE,
        latitude: data.LATITUDE
      }}
      pinColor={this.state.testColor}
    />
)}
)};

onPressMarker(e, index, data) {
   this.setState({testColor:"#000000"});
}
}

我希望标记的颜色在单击后应该会改变，但不起作用。

感谢您的帮助。

Answer 1

您可以将选定的引脚设置为该状态，并在这种情况下使用其他样式，如果您的数据中有一些ID，则可以使用该值代替索引：

    constructor(props) {
      this.state = {
        selectedPin: -1,
      }
    }

    ListMarkers = () => {
    return this.state.data.map((data, i) => {
      return (
        <Marker
          key={i}
          onPress={e => this.onPressMarker(e, i, data)}
          coordinate={{
            longitude: data.LONGITUDE,
            latitude: data.LATITUDE
          }}
          pinColor={ i === this.state.selectedPin ? '#FF0000' : '#FFFFFF'}
        />
    )}
    )};

    onPressMarker = (e, index, data)=> {
       this.setState({selectedPin:index});
    }

是否可以通过单击任何按钮以编程方式更改MapView Market pinColor？

1 个答案: