问:react-native-maps:如何使用marker.showCallout()来映射为标记的坐标数组

Question

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

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

我目前正在为我的地图使用 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();
  }
}

似乎当我渲染单个标记组件时，此方法有效。但是，我无法完全破解我的头脑，以使用 showCallout（） 来显示整组标记的标注。

有人能够阐明如何做到这一点吗？

Answer 1

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. 相应地更新您的更高级别的组件，以便通过道具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>
))}