2

我目前正在摆弄 react-native-maps 以模拟地图空间周围的各种移动对象（模拟项目的实时跟踪），并在标记旁边显示每个对象的名称的标注。

我目前能够在每次按下时显示每个标记的标注。但是，我打算创建一个按钮，用于打开或关闭地图上每个标记的标注。

我目前正在为我的地图使用react-native-maps库。

我所做的是这样的：

/* this.props.trackedObjects is an array of objects containing
coordinate information retrieved from database with the following format
  
  trackedObjects=[{
    coordinate:{
      latitude,
      longitude
    },
    userName
  }, ...]
  
*/

/* inside render() */

{this.props.trackedObjects.map((eachObject) => (
  <View>
    <MapView.Marker
      ref={ref => {this.marker = ref;}}
      key={eachObject.userName}
      coordinate={eachObject.coordinate}
    >
      /*Custom Callout that displays eachObject.userName as a <Text>*/
    </MapView.Marker>
  </View>
))}

/* Button onPress method */
onPress(){
  if(toggledOn){
    this.marker.showCallout();
  }else{
    this.marker.hideCallout();
  }
}

似乎当我渲染单个 Marker 组件时，此方法有效。但是，我无法完全摆脱使用 showCallout() 来显示整组标记的标注。

任何人都可以阐明如何去做这件事吗？

4

1 回答 1

2

1.将组件包装MapView.Marker成自定义Marker：

class Marker extends React.Component {
  marker

  render () {
    return (
      <MapView.Marker {...this.props} ref={_marker => {this.marker = _marker}} />
    )
  }

  componentDidUpdate (prevProps) {
     
     if (prevProps.calloutVisible !== this.props.calloutVisible) {
        this.updateCallout();
    }
  }

  updateCallout () {
    if (this.props.calloutVisible) {
      this.marker.showCallout()
    } else {
      this.marker.hideCallout()
    }
  }
}

2.相应地更新您的更高级别的组件，以便通过 prop 提供标注可见性过滤器calloutVisible：

/* inside render() */

{this.props.trackedObjects.map((eachObject) => (
  <View>
    <Marker
      key={eachObject.userName}
      coordinate={eachObject.coordinate}
      calloutVisible={eachObject.calloutVisible} // visibility filter here
    >
      /*Custom Callout that displays eachObject.userName as a <Text>*/
    </MapView.Marker>
  </View>
))}
于 2017-04-30T13:30:04.510 回答