是否可以通过单击任意按钮以编程方式更改MapView市场pinColor？
是否可以通过单击任意按钮以编程方式更改MapView市场pinColor？
提问于 2018-12-24 03:22:09
我已经实现了一个带有react-native-maps的MapView。我正在尝试通过点击来更改标记的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"});
}
}我希望标记的颜色应该在点击后改变，但它不起作用。
谢谢你的帮助。
回答 1
Stack Overflow用户
发布于 2018-12-24 05:29:11
你可以在状态中设置选定的引脚，并在这种情况下使用不同的样式，如果你的数据中有一些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});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53906533
复制相关文章
相似问题
腾讯云开发者
